ExpressionLab

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.

Did you like this article? Bookmark it: