Floats and Clears Tutorial

View the source code to see how small changes in the HTML and CSS are used to change the layout in each example.

DIV 1

A div with text and an inline image, with no floats or clears applied.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet blue sun logo dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

DIV 2

A div with the image floated left.

Note that the image no longer acts like an inline element: the float takes it out of the document flow and moves it as far up and to the left as possible. It moves up until it hits the block element above it (this paragraph) and to the left until it hits its containing element (the div, which has a declared width).

DIV 3

A div with the image floated right.

The HTML is essentially the same as in Div 2. Only the img tag's class is different, to apply a different float value in the CSS.

DIV 4

A div with the image floated left, and a clear applied to the last paragraph.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

DIV 5

The clear allows you to do this:

Here I've got two images, one in each paragraph, but the clear keeps each paragraph of text attached to the associated image. Without the clear, the text would wrap up around the first image, as in Div 2.

blue sun logo Tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

DIV 6

...which really looks much better if you have a narrower container div.

NOTE the behavior of the image which is inserted into the middle of the paragraph, versus the one that's inserted at the start of the paragraph.

DIV 7

You can put a float on any element, as long as you give it a fixed width.

NOTE: Here, I've applied floats to each paragraph to create columns. To make this work, the paragraphs must either have declared withs, or must be inside divs that have declared withs.

DIV 7A

You can put a float on any element, as long as you give it a fixed width.

NOTE: Here, I've applied floats to each paragraph to create columns. To make this work, the paragraphs must either have declared withs, or must be inside divs that have declared withs.

This works fine until we have more paragraphs than we have columns ... then we run into trouble!

DIV 8

Here, I've given each column a div of its own.

Note: The CSS is the same as for the div 7, but the html markup is a bit cleaner.

I don't need to put a class on every single paragraph, which is nice if I have a lot of them in each div.

Also note that in this example, I'm using stacked classes on the markup for the columns (using more than one class on each div to add additional styles without having to duplicate CSS rules).

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

DIV 9

And here I've given each div a float left, with margins between them.

NOTE: This column doesn't have a margin ... the other two each has a margin-left of 32px.

Try switching the margin to 35 pixels and see what happens.

DIV 10

Additional div, undeclared margins

One good way to avoid running into problems with the box model is to leave your margins loose. Here I've added an additional div surrounding the center and right divs. The left div is floated left, the container div is floated right. Inside the container div, the left-hand (center) div is floated left, the right div is floated right.

This is the way I want you to build columns in your sites!

These columns don't have declared margins. If an older browser displays the box model incorrectly, the layout still won't break. The margins will just be a tiny bit different from one browser to another, but no one will ever notice that.

There's only a tiny bit of extra markup (one additional div tag) and the layout works no matter how the user's browser interprets the box model.

Raven's Floats and Clears Tutorial

DIV 1

A div with text and an inline image, with no floats or clears applied.

DIV 2

A div with the image floated left.

DIV 3

A div with the image floated right.

DIV 4

A div with the image floated left, and a clear applied to the last paragraph.

DIV 5

The clear allows you to do this:

DIV 6

...which really looks much better if you have a narrower container div.

DIV 7

You can put a float on any element, as long as you give it a fixed width.

DIV 7A

You can put a float on any element, as long as you give it a fixed width.

DIV 8

Here, I've given each column a div of its own.

DIV 9

And here I've given each div a float left, with margins between them.

DIV 10

Additional div, undeclared margins

This is the way I want you to build columns in your sites!