Page 1 of 1

Clearing Floats: Two Methods This tutorial will help you clear those annoying CSS floats with two m Rate Topic: -----

#1 Mr. X  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 19-March 08

Post icon  Posted 20 March 2008 - 09:09 AM

Hello there and welcome.

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! :D

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Clearing Floats: Two Methods

#2 VIonescu  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 20-July 08

Posted 20 July 2008 - 06:42 PM

View PostMr. X, on 20 Mar, 2008 - 09:09 AM, said:

Hello there and welcome.

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! :D

... ...

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.

I knew about both methods but your example helped me figure out how to make use of method 2. :) Thank you!


Also, what about this:
You can add these two lines to the "wrapper" selector and it should clear the float.
overflow: hidden;
width: 100%;

This also works with the scroll and auto values to "overflow".

That seems to work for me..what do you think?
Was This Post Helpful? 0
  • +
  • -

#3 joezim007  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 11
  • View blog
  • Posts: 110
  • Joined: 13-September 08

Posted 09 January 2009 - 05:14 PM

Method 2 isn't fully correct. True it works but there are a few more things that need to be taken into consideration that will make it useful for a few more browsers. Here's what you need:

<style type="text/css">

  .wrapper:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}

.wrapper {display: inline-block;}  /* for IE/Mac */

</style>
<!-- main stylesheet ends, use conditional comment to allow IE access to the stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .wrapper {
	zoom: 1;	 /* triggers hasLayout to make it work for IE/Win*/
	display: block;	 /* resets display for IE/Win */
	} 
</style>
<![endif]-->


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1