Posted 20 March 2008 - 09:09 AM
So, you've decided to jump into CSS and start making those cool multi-column layouts - table-less style. But now, those things known as float: left; and float: right; are giving you headaches like crazy. This tutorial is here to help you. I'll show you two methods you can use to bend those headaches to your will!
Preface
As you may know, when you set the display: property of an object (like a paragraph, a div, a span),you have a choice, mainly, between block and inline. The key property when clearing floats is the block property because it will force the float'ed element(s) back into the normal document flow.
Floats take the element out of the document flow, and these methods "put them back in". You won't need to know anything about the former once you put these methods into your document. Let's begin!
Method 1: Use a "clearer" div
You've probably browsed the source of a given HTML page and found this kind of div:
... <div class="clearer"><!-- --></div> ...
That page is using this method to clear a float or several floats. It's very simple and still quite used. Here's how it works.
HTML
<div id="wrapper"> <div id="leftcontent"> <p>Here's some text!</p> </div> <div id="rightcontent"> <p>Here's some more text!</p> </div> <div class="clearer"><!-- --></div> </div>
CSS
#wrapper
{
/* This just centers the #wrapper in the center of the window. */
margin-left: auto;
margin-right: auto;
width: 95%;
}
#leftcontent
{
/* To the left you go! */
float: left;
width: 45%;
}
#rightcontent
{
/* And to the right. */
float: right;
width: 50%;
}
/* And here's the clearer. */
.clearer
{
clear: both;
}
As you can see above in the HTML code, I've put the .clearer class right under the last float'ed element. This forces the two elements back into the normal document flow and makes them "inline" elements (side by side).
In the CSS, the .clearer method simply "clears" both floats, and since it's a block, it's like forcing a new line. Think of it like Lego Blocks, there has to be a block on the bottom and the blocks on top have to go along with wherever the bottom block is, so the .clearer method always comes after the two (or three) float'ed elements and says "Hey you, get back in line!"
That's that for that method, now, here's the one that I'm using...
Method 2: The Alsett Clearing Method
The aforementioned method is great and all for clearing floats and it does work, but it also adds an unnecessary div element to your document. Over time, if you have several float'ed elements, the .clearer methods can add up fast, as you'll be forced to put a clearer method after every float to "keep it in line". But there is another way to clear floats that works just as well and doesn't add but one rule to your CSS and not a thing to your HTML. I'm just going to post the code and let you look at this, I'll explain afterwards.
HTML
<div id="wrapper"> <div id="leftcontent"> <p>Here's some text!</p> </div> <div id="rightcontent"> <p>Here's some more text!</p> </div> </div>
CSS
#wrapper
{
margin-left: auto;
margin-right: auto;
width: 95%;
}
#leftcontent
{
float: left;
width: 45%;
}
#rightcontent
{
float: right;
width: 50%;
}
/* This is the Alsett Clearing Method. */
#wrapper:after
{
clear: both;
content: ".";
display: block;
height: 0px;
visibility: hidden;
}
Notice something gone from the HTML markup? Yep, there's no more "clearer" there. In its place, the CSS has one additional rule and that's the "wrapper:after" rule.
Note: I use the wrapper div here since it contains the floats; always have something to contain the elements that are being float'ed and then just use the :after method on that containing element.
First, in plain English, that rule is saying: "After the thing that has an ID of wrapper, clear both floats, add a period, display that period as a block, give it a height of zero and just make it hidden". Remember how I said the block was a key in clearing floats? That's how this works.
By using CSS' content property, we add a period right after the wrapper div and by displaying it as a block, we force the float to "stop" and force it back into the document flow. By giving it a height of zero and hiding it, we just make sure no one sees that period, thus, there's "nothing" there! The floats "just clear"! The clear: both that's there just like the clearer div tells this block to clear both floats.
Which method?
I would personally go with Method 2. This keeps the clearing of the floats in the CSS where it should be and adds nothing to the HTML.
Compare this with the previous method of where, if you didn't like the name .clearer, then you'd have to go through your document and change every instance of .clearer to the new name. Here, though, you simply have to change one rule and you're finished!
Thank you
I hope you've enjoyed reading this as much as I've enjoyed writing this, and I hope this helps you overcome the headache that is floats. Thank you and happy coding.
MultiQuote
Thank you!
| 