Question

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:

<div class="menu">
  <div id="d">
      <input class="delete" type="submit" value="Delete Selected"><input class="collapse" type="button" value="Collapse All">
  </div><!--
  --><div id="p">
      <input class="expand" name="expand" type="button" value="Expand All">
  <input class="update" type="submit" value="Update Selected">
      </div>
</div>

CSS:

.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;
}

Answer 1

The reason one was collapsing before the other was due to the differences in the HTML formatting.

You had both buttons inline (no line-break) in the green box, and in the red box they were separated with a line break. Here are the differences I’m referring to:

View the JSFiddle: http://jsfiddle.net/pcYhL/14/

These buttons are not separated by a line-break or space:

<div id="d">
     <input class="delete" type="submit" value="Delete Selected"><input class="collapse" type="button" value="Collapse All">
</div>

But these ones are…

<div id="p">
     <input class="expand" name="expand" type="button" value="Expand All">
     <input class="update" type="submit" value="Update Selected">
</div>

If you change the second one to this:

<div id="p">
     <input class="expand" name="expand" type="button" value="Expand All"><input class="update" type="submit" value="Update Selected">
</div>

You will noticed they collapse at the exact same time.