Head First HTML with CSS & XHTML

Chapter 12. Layout and Positioning: Arranging Elements

It’s time to teach your XHTML elements new tricks. We’re not going to let those XHTML 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 multi-column 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 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 ...