CSS floating elements

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.