Padding in mozilla firedox and in safari

Question

As far as i know and i think it's the standard padding will always add up to the width you specify in your css, for for example:

.content{
  width:100px;
  padding:10px;
}

<div class="content"></div>

This div will have 120px actual width. This standard applies to IE Firefox Opera browsers. The problem is in safari it's not the same and this div will have the 100px overall width with 10px padding inside.

Here is my situation i need to solve:

.container{
  width:1000px;
}

.content{
  width:100%;
  padding:10px;
}

<div class="container">
     <div class="content"></div>
</div>

I need the content div to have overall width of 1000px like his parent and have 10px padding inside. But the above code only works in safari and in ie and firefox and opera it will become 1020px overall width.

Answer 1

Sounds like the behavior you're observing is due to the difference between the W3C box model and the "traditional" box model. Quirksmode.org has a good description of the difference between the two:

1. In the W3C box model, the width of an element gives the width of the content of the box, excluding padding and border.
2. In the traditional box model, the width of an element gives the width between the borders of the box, including padding and border.

If #container will always have a fixed width of 1000px, just change #content's width from 100% to 980px.

Note that in order to make sure all browsers the W3C's box model, you need to specify a valid DOCTYPE. Otherwise, IE and Opera revert to the "Traditional" (or "Quirks") box model.