CODEWITHSUNDEEP
htmlresizepercentagecss
DominicM
DominicM

Reputation: 6898

inline-block 50% elements don't resize evenly

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

Upvotes: 3

Views: 1078

Answers (3)

Axel
Axel

Reputation: 10772

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.

Upvotes: 1

joholo
joholo

Reputation: 633

There is still white space between the buttons in the second div.

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

Put them on the same line and you should be good.

http://jsfiddle.net/pcYhL/13/

Upvotes: 1

khollenbeck
khollenbeck

Reputation: 16157

I am not certain I am 100% clear as to what the issue is. But I think this should fix your problem. Add min-width:140px; to your containers.

#d{
    width:50%;
    min-width:140px;
    display:inline-block;
    background-color:red;
    margin:0;
    padding:0;
}
#p{
    width:50%;
    min-width:140px;
    display:inline-block;
    background-color:green;
    margin:0;
    padding:0;
}

http://jsfiddle.net/pcYhL/6/

If you are expecting the buttons to re-size as the containers re-size then you will need to use percentages for the widths of the buttons.

.delete{
    margin:0;
    padding:0;
    width:70%;
}
.update{
    margin:0;
    padding:0;
    width:70%;
}
.collapse{
    margin:0;
    padding:0;
    width:70%;
}
.expand{
    margin:0;
    padding:0;
    width:70%;
}

http://jsfiddle.net/pcYhL/10/

Upvotes: 0

Related Questions