Simple, It Ain’t

June 24, 2003 8AM PST

Anyone who says CSS is easy hasn’t had enough experience with it. It is easy if things go right; it is a bottle of Tylenol if things do not.

Example 1 — precisely the sort of thing I’m talking about. Take this simple block of code:

<div id="main">
	<span>
	<p>multiple paragraphs here</p>
	</span>
</div>

Try to give the span a border, if all the paragraphs are floated. It can’t be done, even if the span is a block–level element.

This should be possible, block level or not. Unless the text is removed from the document stream via absolute positioning, it should be contained within the span, which means it gets a border. However, and this is a problem amongst every browser, the floated text is treated as independent of the document stream. Hence: no border.

This is inconsistent behaviour. Floated items are not supposed to be removed from the document flow — you’ll notice how nicely the non–italicized paragraphs in example 2 wrap around the italicized text. This is expected. So why no border in example 1?

CSS is powerful, but with great power comes grea… strike that. Let’s just say it’s not easy and leave it at that.

update: Simon pointed out that my example is actually invalid, since block–level elements shouldn’t be contained within inline elements. The span is invalid when surrounding the paragraphs. But! Even when corrected, the problem holds — see example 3 for a div in place of the span.