View Full Version : width question

Mar 29th, 2007, 08:42 PM
I am trying to understand width better in CSS especially related to Firefox.

If my container div for the overall page is width 762px, then shouldn't the div's inside of that when they say 100% fall within that 762px?


Mar 29th, 2007, 09:42 PM
That 100% does not include the padding, margins, or border (except in IE, which gets the box model wrong). Once you add those in, your div would exceed the width of your containing div. I learned that from Eric Meyer's tutorial at lynda.com and from his O'Reilly: CSS Definitive Guide.

So, for example, let's say your container div is 750px, You've set your maincontent div to be 100% (750px). You've given it padding of 20px on each side, and a border of 2 pixels. You wanted a left margin of 5px.

750px + 20px + 20px + 2px + 2px + 5px = 799px (the total area your maincontent div takes up)

Mar 29th, 2007, 09:54 PM
THANK YOU!!! That helps a lot!

Mar 30th, 2007, 08:19 AM
In cases like this, it may be better to specify width: auto.
With that, block level elements (like divs) left in the normal flow (not positioned) will take up whatever width they have available so there's never any conflict.
Auto is the default value for width where block level elements are concerned, by the way, so you can leave an explicit width setting off.