CSS Boxes

Here’s some simple CSS and HTML, just a square box with some padding to keep the text away from the edge, a border for decoration, and then a margin to space it from the box next-door.

<style>
#example {
	float: left;
	width: 200px;
	height: 200px;
	background: #F00;
	border: 10px solid #FF0;
	padding: 20px;
	margin: 30px;
	}
html>body #example {
	width: 140px;
	height: 140px;
	}
#next {
	float: left;
	width: 200px;
	height: 200px;
	background: #00F;
	border: 1px solid #FF0;
	margin: 30px 0;
	}
</style>
<div id="example">
	top left
</div>
<div id="next">next</div>

But look at these two illustrations. The top pair shows how IE6 interprets the code and the lower one how Firefox sees it.

Both handle the margin correctly, leaving 30 pixels between the two boxes. The difference is that Mozilla browsers ADD the padding and border to the height and width of the box, while Explorer INCLUDES their dimensions within the height and width settings. Thus the box which Explorer shows 200 pixels square displays as 260 pixels square in Firefox (200px + 20px*2 padding + 10px*2 border = 260px).

The solution is to place this piece of code, which is in a format Explorer cannot read but Mozilla browsers can, after the CSS for #example, thus:

html>body #example {
	width: 140px; /* desired width - 2*padding - 2*border */
	height: 140px;
	}

Et voilà, the boxes now appear the same in both browsers. This bit of hackery will come in useful whenever such differences rear their heads.

Update

The purpose of this article was to explain something you might experience and to provide a direct workaround. It is a better plan to avoid such problems in the first place:

• For vertical spacing, margin-top performs fairly consistently but margin-bottom less so, since margins underneath blocks may be collapsed into the margin above the following block. You will suffer less grief if you try to stick with margin-top or with padding.
• IE6 does several strange things when you combine floats with margins. Try to use widths and float directions in a way which makes it possible to avoid margins. For example, if two columns 500 pixels and 200 pixels wide are floated left and right within a 720 pixel block, a 20 pixel space will be created between them with no need for a margin declaration.
• Although it involves a little more thought and typing, nested blocks often make for more certain cross-browser compatibility. A block 400 pixels wide, given a margin of 20 pixels and set inside an outer block of 440 pixels, will appear as you intend in any browser, more reliably than giving the 440 pixel block padding of 20 pixels.