Comments on: Clear Your Floats - The Right Way

By: Zed

Zed — Thu, 24 Jul 2008 02:29:09 +0000

#container {
overflow: auto;
}
* html #container {
height: 1%; }

And how do you remove/hide the scrollbar that is displayed from de overflow:auto?

By: Andreas Lagerkvist

Andreas Lagerkvist — Sat, 12 Apr 2008 13:43:20 +0000

I’ve used easy clear for as long as i can remember but the overflow-one seems fine as well. I remember hearing it doesn’t always work in IE though?

I agree that you shouldn’t add .clearfix-classes all over the place as they are completely design-related. I use my css-constants to avoid having to use a class but still be able to structure my CSS any way i want:

#navigation ul = $self-clear;

other code

#wrapper = $self-clear; etc…

By: Nacho

Nacho — Fri, 11 Apr 2008 13:28:27 +0000

Great help. I used empty divs. But not anymore.
Thank you :]

By: Steve

Steve — Fri, 25 Jan 2008 02:58:05 +0000

I use this method to clear my floats all the time. To me, it’s the best solution out there. Thanks for posting this. Cheers. =)

By: Terrence Wood

Terrence Wood — Wed, 12 Dec 2007 20:57:34 +0000

overflow:hidden is the better option for containing floats, it prevents FireFox from giving the clearing element focus when tabbing through a page and prevents scrollbars appearing where the clearing element shrinkwraps an anchor. Again, you must ensure that the containing element hasLayout for it to work in IE6. hasLayout is triggered by setting an explicit width amongst other things.

@Mohamed Jama, one situation where you wouldn’t want to use float to clear other floats is when you want to add margin: auto to the container.

By: Will Wilkins

Will Wilkins — Tue, 11 Dec 2007 18:14:19 +0000

Hi Dan, Interesting method. However, the last method shown by Mohamed should work fine as well. However, the width of the container would have to be set to span the page as it did before the float. But Mohamed could have kept the styling within the #container div and he set both of the ‘float’ containers to the same width.

By: Dan

Dan — Tue, 11 Dec 2007 17:11:24 +0000

Dave -

You’re right; they’re both valid solutions to the same problem. It’s a win either way, since you’re removing the need for non-semantic content like empty divs.

Also, you get points in my book for using “whilst” (:

By: Mohamed Jama

Mohamed Jama — Tue, 11 Dec 2007 16:24:09 +0000

Hey Dave,

Yeah it might include a little more CSS but then again you don’t actually need to apply width to the parent DIV and yeah you are correct you have to float all elements within that parent. It worked for and is tuck with it to be honest, I will give the easyclear a chance as soon as i can though

By: Dave Woods

Dave Woods — Tue, 11 Dec 2007 16:18:51 +0000

Hi Dan,

I think Mohamed was talking about floating the parent container and applying a width so that it would stretch to contain its children. Whilst that method works, sometimes it can cause issues especially when dealing with fluid layouts where a percentage is required so I would suggest clearing where possible otherwise you’ll end up needing to float all elements which can lead to a lot of extra CSS.

I can’t think of any situation where the overflow method would be cumbersome? All the overflow: auto; method does is remind the parent that it should be set to auto anyway and forces it to contain its children. If you needed to use overflow for another purpose then you should find that overflow: hidden or scroll; work just as well ;)

Thanks Dave

By: Mohamed Jama

Mohamed Jama — Tue, 11 Dec 2007 16:12:40 +0000

hey Dan,

try this

#container{ background: #79aff2; padding: 10px; border:1px solid #1b5fab;float:left;}
#container #float1{ float:left; background: #eddd94; padding: 5px; border:1px solid #333; margin: 5px; width:300px;}
#container #float2{ float:left; background: #eddd94; padding: 5px; border:1px solid #333; margin: 5px; width:300px;;}

it works fine without setting the height, this is just my opinion though Dan :D