Page Layout with CSS - HTML5 with CSS3 - page 303

The original purpose of the float property was simply to wrap text around an image, just as you've seen
before. A floated element is partially removed from the normal flow of content and shifted to the left or right
as far as it will go, until it runs into the edge of its containing box (inside any padding or border) or into
another floated element. Any content that appears after a floated element then flows up and around that
floating block like a stream around a boulder.
We can repurpose this shifting and flowing behavior of floating boxes to form vertical columns of content.
In a nutshell, simply wrap each block of content in a box and float those boxes in opposite directions (or
even the same direction) and they'll line up side by side in tidy columns. Of course, it's just a little bit more
complicated than that.
To begin, Listing 9-1 shows the markup we'll be working with. In this case it's a section element
containing the main content of the page, and another section element containing supplemental content.
These could be different elements, such as an article and an aside , or two div s, or a section and a
figure , and so on, but we'll use section s for this demonstration. We've given each section an
appropriate class—“main” and “extra”, respectively—to describe how they differ semantically and also to
make them easier to target in our CSS.
Listing 9-1. Two sections of content
<section class="main">
<h1>Welcome, Heroes!</h1>
<p>Power Outfitters offers top of the line merchandise at rock-bottom
prices for the discerning costumed crime-fighter. From belts to boomerangs,
we're your one-stop shop for all your specialized gadgetry and costuming
needs.</p>
<p>Come browse our wide selection of capes, cowls, masks, boots, belts,
gloves, tights, unitards, and leotards in all the colors of the rainbow.
Our clothiers are on call 24 hours a day, always ready in a pinch to
replace a singed cloak or patch a ripped tunic, because we know crime
doesn't sleep and justice can never rest.</p>
</section>
<section class="extra">
<p><strong>Power Outfitters</strong>
<br>616 Kirby Ave, between Romita and Ditko
<br>Mon-Thu: 8am-10pm
<br>Fri-Sun: 8am-12pm
<br>24-hour service and repair: call 555-1961</p>
</section>
By assigning each of these section s a width and floating them in opposite directions, as we've done in
Listing 9-2, we can achieve the coveted two-column layout. We'll add some background colors as well so
you can clearly see the two boxes in Figure 9-5.