Clever Geek Handbook

50 percent line box elements do not change evenly

I have 2 inline divs with 50% width. They both have two buttons 140px wide.

My expectation was that since the elements are equal in width, they should also be resized at the same time. What happens now is that when the containing div gets small enough that the four buttons don't fit anymore, they wrap and the 2 divs resize, but before they resize one size, one div gets smaller. This is best illustrated in the jsfiddle. If you resize your browser window slowly, you will see one div resize in front of the other.

http://jsfiddle.net/dominicm/pcYhL/2/

HTML white space is removed with comments and margin and padding is 0.

What could be causing this and how can I fix it? Any other suggestions on how to achieve the layout shown in the jsfiddle?

Here the link code in the jsfiddle case is not 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;
}
+3


source to share


3 answers


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

You had two buttons per line (no line break) in a green box, and in a red box they were separated by a line break. Here are the differences I mean:

View 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 ...

<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 notice that they collapse at the same time.

+1


source


There is still a space between the keys of the second div.

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


Put them on one line and you should be good.

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

+1


source


I'm not sure if I'm 100% clear what the problem is. But I think this should solve 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 expect the buttons to resize as the container sizes, you will need to use percentages for the width 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/

0


source






More articles:


All Articles