I'm laying out a webpage for hopper, one of our avatars here on Khan Academy.
It's got an image, some cool links, and a paragraph.
I think that this picture of Hopper would look better next to the paragraph,
so I'm going to cut
and paste it down here.
Hm. Okay, that doesn't look as good as I hoped it would.
The text starts at the bottom of the image.
I was hoping that the text would wrap around the image,
like in newspapers and magazines.
We'll need a new CSS property for that: `float`.
It's a way of floating elements in and around other elements,
and it's perfect for wrapping text around images.
So we go up to our "pic" rule, and say: `float: `.
And then for the value, we need to decide if we want the picture to float
to the left-hand side or the right-hand side.
Let's try left.
Great. Perfect.
Well, okay, not quite perfect,
because the text is really close to the image.
Do you remember what property we should use
to separate the text from the image?
It's part of the box model, which we just learned.
Margin.
Let's add some `margin: right` and `margin: bottom` to this image
to give it a little breathing room.
Ah, okay, that's much better.
We can also float elements that aren't images.
Like if we want something like a sidebar.
Let's-- what about this list of links?
We can take this list of links and float it to the right.
So let's add a rule for `#hopper-links`,
and float it to the right.
Okay, it's floating but it's taking up a lot of width--
more than I was hoping it'd take up.
Let's restrict the width to 30 percent
so it'll always take up 30 percent of the page,
and the rest of the page will fill in the remaining 70 percent.
Generally, whenever we float a `div`, we have to give it a width.
Because otherwise, `div`s try to take up all of the space,
and nothing can wrap around them.
Seems like it also needs a little bit of a `margin: left`, too.
Ah, okay.
Now, notice the footer at the bottom of the contact info for Hopper.
It's doing this weird thing where it's overlapping the sidebar.
And that's because it's "wrapping".
We don't want our footer to wrap, though.
We want it to always be on the bottom of everything,
because it's a footer.
To make it not wrap, we can use the `clear` property,
and put `clear: both`.
Hah.
We could use `clear: left` or `clear: right`
if we only wanted to not wrap around
right-floating elements or left-floating elements.
But usually we want to not wrap around any floating elements,
so we say `clear: both`.
This is starting to look like a real webpage.
We have a main area, a sidebar, a footer.
In fact, you now know the CSS properties that make most webpage layouts happen.
Put together some `div`s with width, height, padding, margin, float, and clear,
and there are all sorts of webpage layouts at your fingertips.