WEB STANDARDS CREATIVITY

A quick preview of our code at this point shows that not much has changed, except that we’ve lost part of our gray border
(Figure 3-5).
You may be asking, what in the name of Tim Berners-Lee is going on here? Or you might not be. We really don’t know.
Figure 3-5. The layout is unchanged, but where’s our border off to?
Clearing time
Even though our two content divs don’t look drastically
different than before, they are nonetheless floated elements,
and as a result, they’ll “escape” from their nonfloated
container, the content-layout div. So the
border that we see at the top of our document is actually
the whole border for content-layout: the two floated
divs that it contains have simply flowed out of their parent,
effectively completely collapsing our poor container.
So content-layout now has no nonfloated elements to
give it some height, and our lovely four-sided border just
looks like a thick gray line. Naturally, this won’t do. But
don’t start in quite yet with the gnashing of teeth and the
pulling of hair. Thankfully, there’s a solution.
To make sure that our container . . . well, contains the two
columns, we’ll use the “Easy Clearing Method,” which is
written up at http://positioniseverything.net/easyclearing.html.
First, we place the following in our
core.css file:
#content-layout:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Here we used the :after pseudo-element (www.w3.org/
TR/CSS21/generate.html#x5) to generate extra content
(namely, a period) at the end of our container, after all
other elements. That extra content is then hidden from
the user’s eye, but turned into a block-level element that
will clear all other floats preceding it in the markup.
Unfortunately, this rule won’t work in any current version
of IE. And what’s more, to placate the Windows version of
IE, we actually need two solutions: one for the latest version,
7, which is a public beta at the time of this writing
(but should be released properly by the time the book
hits the shelves), and one that’s a hack for earlier versions
currently in use.
To make IE7 play nicely, we simply insert the following
after our :after rule:
#content-layout {
display: inline-block;
display: block;
}
To give credit where credit’s due, web designer and standards
guru Roger Johansson (www.456bereastreet.
com) was the one who first published this workaround
(www.456bereastreet.com/archive/200603/
new_clearing_method_needed_for_ie7). The display:
inline-block; triggers the nonstandard hasLayout property
in IE7, which forces the container to automatically
contain any floated elements within it.
chapter 3 New York Magazine: My, What a Classy
59