2

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

2 Answers 2

4

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

1
  • +1 nice fix for the padding -- I would not have though that box-sizing would have had this affect -- shame it doesn't seem to work for the margins though.
    – Pebbl
    Feb 26, 2013 at 18:18
2

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.