myystiqueen
New Member
I have 2 inline-block divs with 50% widths. They both have 2 buttons each with 140px widths.My expectation was that since elements are both equal in width they should also resize at the same time. What happens now is that when the containing div gets small enough so that the four buttons dont fit any more they wrap and the 2 divs resize, but before they resize equally one div gets smaller. It's best illustrated in the jsfiddle. If you resize the browser window slowly you will see one div resizing before the other.http://jsfiddle.net/dominicm/pcYhL/2/HTML white-space is removed with comments and margin and padding are all set to 0.What could be causing this and how to fix it? Any other suggestions on how to achieve the layout shown in jsfiddle?Here's the code for reference in case jsfiddle isn't available later.HTML:\[code\]<div class="menu"> <div id="d"> <input class="delete" type="submit" value="http://stackoverflow.com/questions/14587263/Delete Selected"><input class="collapse" type="button" value="http://stackoverflow.com/questions/14587263/Collapse All"> </div><!-- --><div id="p"> <input class="expand" name="expand" type="button" value="http://stackoverflow.com/questions/14587263/Expand All"> <input class="update" type="submit" value="http://stackoverflow.com/questions/14587263/Update Selected"> </div></div>\[/code\]CSS:\[code\].menu{ width:100%; height:80px; border-radius:7px; background-color:#666; text-align:center; margin:0; padding:0;}#d{ width:50%; display:inline-block; background-color:red; margin:0; padding:0;}#p{ width:50%; display:inline-block; background-color:green; margin:0; padding:0;}.delete{ margin:0; padding:0; width:140px;}.update{ margin:0; padding:0; width:140px;}.collapse{ margin:0; padding:0; width:140px;}.expand{ margin:0; padding:0; width:140px;}\[/code\]