eSpace Blog RSS
22Jan

Why 100% width may damage the layout

0

One of the common mistakes developers make when creating layouts is specifying a width of 100% when they need the block element to take the full width of its parent element.

#footer {
width: 100%;
margin: 7px;
padding: 5px;
border: 1px solid #CCC;
}

Why is this a mistake? Because, according to the W3C box model, when a width or height is explicitly specified for any block-level element, it should determine only the width or height of the content within the box, with the padding, borders, and margins applied afterward. So, if you try to add a padding, border or margin to that block, the content will either overflow or push elements wider than they should be.

The solution is simply not to specify an explicit width for your block. Instead, leave it with its default value, auto, which will make it expand as you want. Now, you can specify any padding, border and margin values with no problems.

#footer {
margin: 7px;
padding: 5px;
border: 1px solid #CCC;
}

But if you really need to specify an explicit width for your block, you can use a nested block as described here.

Written by:
Hatem Mahmoud (www.expressionlab.com)

Post a Comment

eSpace podcast Prodcast

RSS iTunes

Archive

Latest Comments