Head First HTML and CSS, 2nd Edition

Chapter 11. Layout and Positioning: Arranging Elements

It’s time to teach your HTML elements new tricks. We’re not going to let those HTML elements just sit there anymore—it’s about time they get up and help us create some pages with real layouts. How? Well, you’ve got a good feel for the <div> and <span> structural elements and you know all about how the box model works, right? So, now it’s time to use all that knowledge to craft some real designs. No, we’re not just talking about more background and font colors—we’re talking about full-blown professional designs using multicolumn layouts. This is the chapter where everything you’ve learned comes together.

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 cliff-hanger. 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? ...