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