First time visitor? The tutorials start here.

More on floats

Open practice1.htm in your browser (either one, doesn’t matter right now), and open style.css in Crimson Editor.

Right now, #content is floated to the left and #links (the sidebar) is floated to the right. What I want you to do now is switch those two around so that the sidebar is on the left and the content is on the right.

Hint: Do NOT change a single thing in practice1.htm. The point of using CSS is to separate content from style, and since layout is part of the style, you need to change this in the CSS.

If you’re not sure where to make these changes in your CSS, highlight the code below so you can read it:

#content {
	background: #fff;
	padding: 1px 0;
	float: left;
	width: 700px;
#links { float: right; width: 200px; }

If you’re not sure what you should change that to, highlight below:

#content {
	background: #fff;
	padding: 1px 0;
	float: right;
	width: 700px;
#links { float: left; width: 200px; }

To all of you old-schoolers who have always used tables for layout, do you see how much easier it is to change the layout when you are separating content (xHTML) from style (CSS)?

How floats work

The natural behavior of a block-level element such as a <div> or a <p> is to appear below the element that it follows. But when something is floated, the floated element is pushed to either the left or the right depending on how you define it, and the element that follows the float is also floated up beside it. When there is enough text following the float, that text will wrap around it.

Imagine a <div> or a <p> (both block-level elements) as ice covering a lake. Once you float that ice over to the left or to the right, the next thing that was previously underneath it is able to float up to the surface of the water, right alongside that ice.

A visual might be in order, to better demonstrate what I’m talking about:

Non-floated element

This text is surrounded by <p></p> tags, and is following its default behavior of appearing below the gray area.

Floated element

This text is surrounded by <p></p> tags, which would normally cause it to appear beneath the gray area. But since the gray area is floated to the left, this text starts alongside the gray area. Once it “clears” the gray area, it continues below it. And this brings us to “clearing” floats…

Clearing floats

This is where my ice analogy falls apart. If you think about clearing a float in terms of that analogy, it either sounds like it’s also floating to the surface or it just doesn’t make sense at all. So, don’t think in terms of the ice analogy when thinking about clearing floats.

When you clear a float, you make it stop floating and go back to its natural behavior. That is, you push it down to the next line, per its natural default behavior. To demonstrate…

Floated element

This text is surrounded by <p></p> tags.

This is another paragraph (surrounded by <p></p> tags), with “clear: both;” applied to it.

Instead of “clear: both;” you could use “clear: left;” to clear an element that was floated to the left like our gray boxes, or you could use “clear: right;” to clear an element that was floated to the right. There are cases where you might want to specify left or right, but often “both” will do the trick.

Next, let’s see if we can give that practice page a more coherent design.

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!

Comments (2)

clabbyApril 1st, 2009 at 11:41 am

*waits for more*

Now all this crap is starting to make sense!

LesaApril 1st, 2009 at 1:16 pm

Comments like that inspire me to keep writing. Thanks, Clabby! 🙂

Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.