HTML and CSS Reference
In-Depth Information
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?
And can we use this property to do even more
interesting things with our pages? Well, of course,
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 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.
