2个内联div，第2个与第一个不匹配

Question

I'm trying to get the first div, '#grp1', left-aligned and inline with the second div, '#grp2'. Both divs have 2 input elements in them which are vertically aligned within their divs.

The issue is that the grp2 div isn't scaling its width to fit onto the same line. I keep resetting its width, but the console element inspector shows it isn't reducing on the page. I've gotten them on the same line only by reducing the with of grp1. grp2 still wasn't changing. I'd like everything to be much more compact.

Thank you very much. If you have a sec, I'd appreciate some detail as to why the grp2 div isn't scaling at all; I seem to keep getting stuck on markup issues.

 legend{ color: RGB(25, 115, 115); } .label { float:left; width:60%; margin-top: 5px; font-weight:bold; color: RGB(25,90,90); font-size: 18; font-weight: 8; font-family: 'Open Sans Condensed', sans-serif; } .form-text{ color: RGB(100,100,100); font-size: 15; font-weight: 6; font-family: 'Open Sans Condensed', sans-serif; margin-top: 3px; } .grp1{ float: left; width: 40%; position: relative; } .grp2{ position: relative; margin-left: 45%; } select{ margin-bottom: 29px; } .err{ font-size: 15; font-style: italic; color: RGB(180,100,100); } 

 <div id="form-input"> <form id="form"> <fieldset> <legend class='form-text' style='font-size:20'>Hello World</legend> <div id='grp1' style='display:inline-block' class='grp1'> <label for='subject'style='display:block' class='label'> Choose your subject.<br> <input type="text" id="subject" name='subject' style="display:block" class='form-text'><br> </label> <label for='mode' style='display:block' class='label'> Select your search mode.<br> <select name="mode" form="form-input" id="mode" class='form-text' onchange="buttonHandler(this)"> <option value="1">Search</option> <option value="2">Live</option> </select> </label> </div> <div id='grp2' style='display:inline-block' class='grp2'> <label for='startdate' style='display:block' id='startlabel' class='label'> Choose a start date for a search, up to one week ago: <br> <input type="text" id="startdate" value="" placeholder="day/month/2016" style="display:block" class='form-text'><br> <div name="error1" id="starterror" style="display:none" class='err'></div> </label> <label for='enddate' style='display:block' id='endlabel' class='label'> Choose an end date for your search: <br> <input type="text" id="enddate" style="display:block" class='form-text'><br> <div name="error2" id="enderror" style="display:none" class='err'></div> </label> </div> </fieldset> </form> </div> 

Answer 1

Since you have made it relative, no need to give 45% margin. Just remove it, and it will work.

 legend{ color: RGB(25, 115, 115); } .label { float:left; width:60%; margin-top: 5px; font-weight:bold; color: RGB(25,90,90); font-size: 18; font-weight: 8; font-family: 'Open Sans Condensed', sans-serif; } .form-text{ color: RGB(100,100,100); font-size: 15; font-weight: 6; font-family: 'Open Sans Condensed', sans-serif; margin-top: 3px; } .grp1{ float: left; width: 40%; position: relative; } .grp2{ position: relative; } select{ margin-bottom: 29px; } .err{ font-size: 15; font-style: italic; color: RGB(180,100,100); } 

 <div id="form-input"> <form id="form"> <fieldset> <legend class='form-text' style='font-size:20'>Hello World</legend> <div id='grp1' style='display:inline-block' class='grp1'> <label for='subject'style='display:block' class='label'> Choose your subject.<br> <input type="text" id="subject" name='subject' style="display:block" class='form-text'><br> </label> <label for='mode' style='display:block' class='label'> Select your search mode.<br> <select name="mode" form="form-input" id="mode" class='form-text' onchange="buttonHandler(this)"> <option value="1">Search</option> <option value="2">Live</option> </select> </label> </div> <div id='grp2' style='display:inline-block' class='grp2'> <label for='startdate' style='display:block' id='startlabel' class='label'> Choose a start date for a search, up to one week ago: <br> <input type="text" id="startdate" value="" placeholder="day/month/2016" style="display:block" class='form-text'><br> <div name="error1" id="starterror" style="display:none" class='err'></div> </label> <label for='enddate' style='display:block' id='endlabel' class='label'> Choose an end date for your search: <br> <input type="text" id="enddate" style="display:block" class='form-text'><br> <div name="error2" id="enderror" style="display:none" class='err'></div> </label> </div> </fieldset> </form> </div>