CSS Fluid layout with containing div margin or padding causes overflow

Question

I have a jsfiddle where the outer most wrapper div has 100% width. I want to create inner div(tb_margin or tb_padding) whose content should start 40px from the left. I tried both margin and padding to create this 40px left spacing but in both the cases the actual div stretches out of the right side due to width 100%.

I want the tabs to be contained in the a div (tb_margin or tb_padding) which is 40px offset from the left but should stretch upto the full width till the right border.

I don't want to put overflow:hidden in (tb_margin or tb_padding) because in doing so the tabs will be hidden if there are too many tabs. Ideally the tabs should wrap to the next line contained by the (tb_margin or tb_padding).

<h1>hello</h1>
<div style="width:100%;height:100px;border: 1px solid red">
    <div style="width:100%;height:50%; border: 1px solid blue">
        <div style="height:100%;width:150px;float:left; border:1px solid yellow"> logo</div>
        <div style="float:right;border:1px solid green;"> User| 13-Nov-13| Logout </div>
    </div>
    <div id="tb_margin" style="width:100%;margin-left:40px;border:1px solid green">tabbbs with margin here </div>
    <div id="tb_padding" style="width:100%;padding-left:40px;border:1px solid grey">tabbbs with padding here </div>
</div>

I really wished CSS box layout was more intuitive, or am I missing something

Answer 1

The simplest method for what you are trying to achieve is just to not specify width: 100% on the margined or padded divs. By default all divs are displayed as block which means they will stretch to fill the remaining horizontal space.

The problem with actually specifying width: 100%, as you have found out, is that the horizonal padding and margin is added on top of the width calculation - if you leave the width as not specified, the browser automatically works out the width required to fill the space, which may not be 100% of it's parent.

In future it's best only to apply width: 100% when you really need it (for example when using floats), and avoid specifying dimensions if you can get away with it.

<h1>hello</h1>
<div style="width:100%;height:100px;border: 1px solid red">
  <div style="width:100%;height:50%; border: 1px solid blue">
    <div style="height:100%;width:150px;float:left; border:1px solid yellow">
      logo
    </div>
    <div style="float:right;border:1px solid green;">
      User| 13-Nov-13| Logout
    </div>
  </div>
  <div id="tb_margin" style="margin-left:40px;border:1px solid green">
    tabbbs with margin here
  </div>
  <div id="tb_padding" style="padding-left:40px;border:1px solid grey">
    tabbbs with padding here
  </div>
</div>

Answer 2

box-sizing to the rescue!

#tb_padding {
  width:100%;
  padding-left:40px;
  border:1px solid grey;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Here's the demo: http://jsfiddle.net/pavloschris/nepC3/25/ And some info: https://developer.mozilla.org/en-US/docs/CSS/box-sizing