Head First HTML with CSS

examining a two column page
Did you do the Super Brain Power?
If you didn’t do the Super Brain Power at the end of
the last chapter, then march right back there and
do it. It’s required.
Okay, now that we have that out of the way, at
the end of the last chapter, we left you with a bit
of a cliffhanger. We asked you to move the elixirs
up under the logo, and then add one little
property to the elixirs rule in your CSS, like this:
488 Chapter 12
float: right;
And, wow, what a difference one property
can make! All of a sudden the page has gone
from a fairly ordinary-looking Web page to a
great-looking Web page with two columns. It’s
immediately more readable and pleasant to the
eye.
So what’s the magic? How did this seemingly
innocent little property produce such big effects?
And, can we use this property to do even more
interesting things with our pages? Well, of course,
this is Head First, after all. But first, you’re
going to need to learn how a browser lays out
elements on a page. Once you know that, we can
talk about all kinds of ways you can alter how it
does that layout, and also how you can start to
position your elements on the page.
Here’s the good news: you already know all
about block elements and inline elements, and
you even know about the box model. These are
the real foundations of how the browser puts
a page together. Now all you need to know is
exactly how the browser takes all the elements in
a page, and decides where they go.