First time visitor? The tutorials start here.

CSS for Layout: Clearing floats

In part 1 of CSS for layout, you learned how to surround each section of your page with a <div>, giving each division its own ID, and then you learned how to style each section by targeting its ID. In part 2, you learned how to “float” one division, allowing the next division to sit beside it to create a sidebar, but the float created a problem. Now you will learn how to solve that problem.

Clear that float

Open practice1.htm in Crimson Editor. Immediately after the closing </div> for your “links” div, add <br style="clear:both;" /> so it looks like this:

</div><br style="clear:both;" /><!-- end links -->

Now open (or refresh, if it’s already open) practice1.htm in both IE and Firefox. The #container div’s border is now surrounding everything in both browsers.

What we just used here is called “inline CSS,” because instead of being in a separate style sheet, it is coded “in line with” the content. It’s not going to stay there, though, because the whole point of CSS is to keep as much styling as possible out of your xHTML page.

Now we’re going to take that inline CSS out of there and put it into /styles/style.css. But first, let’s give that <br /> an ID so we can target it with the external CSS. Let’s create an ID for it that reminds us that it (1) is immediately after the “links” div and (2) that it’s a <br />, and let’s replace the inline CSS with that ID:

</div><br id="links-br" /><!-- end links -->

Now let’s move that clear:both; to style.css, using #links-br to target the id of “links-br”:

#links-br { clear: both; }

If you refresh the page in both browsers, you’ll see that the result is the same as the inline CSS, except you won’t have to edit every page directly if you ever want to change that <br />’s behavior.

March 30, 2009 update: I didn’t feel as though I had explained floats adequately enough in this post and the previous one, so after the next few tutorials, you will find another one on floats that I wrote this evening. End update.

In the next few tutorials, you’ll learn how to tidy that practice page up a bit more, starting with that unruly list.

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



Comments (2)

Morwen OronorApril 23rd, 2009 at 2:26 am

I’ve just completed designing a website with the help of what I’ve learned on these pages. It is so easy, even an old lady can learn it. Great work Lesa, you are a wonderful teacher.
🙂

LesaApril 23rd, 2009 at 7:20 am

Thank you for the wonderful feedback, MO! 🙂

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.