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 <div> up under the logo, and then add one little property to the elixirs rule in your CSS, like this:

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.