CSS Layouts - Pro CSS Techniques - page 151

Figure 7-28. One solution: float everything!
The float nearly everything method ( http://orderedlist.com/articles/
clearing-floats-fne/ ) works pretty well, but you may find that it becomes difficult to main-
tain on pages that have many levels of nesting. A stray clearing element left on the page may
cause major page layout malfunctions. Also, if you are part of a group maintaining a site, keep
in mind that a great many people don't know about floats (let alone understand why everything
is floated), and they may “break” your layout unintentionally when they modify the page.
Using Easy Clearing
If you don't want to float everything on the page, another solution is to use the easy float
clearing method. There's a full description of the technique at Position Is Everything
( www.positioniseverything.net/easyclearing.html ), but we'll summarize it here.
Earlier we inserted an element inside a parent container but after any floated elements in
that parent container and then set that newly inserted element to clear the floats. But suppose
we don't want that superfluous element. We want to be able to say to the user agent or browser,
“You know this container? Yep, the one that's got floated stuff in it. Well, we want this one not
to collapse.” In webspeak, we want to apply an attribute to that parent container that passes
on that message in terms the user agent or browser understands.
This technique is really clever, and approaches the problem by using different browsers'
capabilities and foibles. As mentioned in Chapters 2 and 3, there is a way of generating con-
tent in CSS using the after pseudo-class (to learn more, visit www.richinstyle.com/guides/
generated2.html ), and it's the backbone of this technique. You start with this: