Best way to work with floating?

If I have a 2 column design, I'll often float one side left, the other right, then be forced to add a blank div that clears it underneath. Is there a better way, without having to add arbitrary elements that only clear? Maybe there's a bit of css I'm missing out on

Thanks

<rant>

This goes for everyone: you never have to use a clear div. Ever. I slap people that use clear divs. I go Jackie Chan on them. I eat them for breakfast. I hate clear divs, they are SO obviously unneeded, and yet all these "pros" use clear divs like there's no tomorrow. Even worse, people who use <hr /> because they think they are clever (haha, it's not a clear div, so technically it's fine!!!) No, you aren't clever. No, it's not fine.

</rant>

Now with that out of the way...

Just add "clear:both" onto the next element. Or if you are clearing to bring the background down, add "overflow:hidden" for FF, and for IE6 "height:1%" or "width:100%" or "width:123px" does the trick. You will get the hang of it pretty quickly. It's hard for me to explain to you how I know what to use - it's just second nature to me, I don't even think about it. Try in this order:

1) Add "clear:both" to the next element (still not working, go to step 2)
2) Add "overflow:hidden" to the existing elements (still not working, go to step 3)
3) Set a width on existing elements (Same as "overflow:hidden" for FF, but for IE6. Only used in certain circumstances. still not working, go to step 4)
4) Float 'em all

Because even I'm struggling to figure out WTF I wrote above if you show me your example I'll show you how to do it with no clear divs. I think that'll be easier for everyone!

http://www.robertnyman.com/2007/04/1...ues-explained/

I use overflow:hidden most of the time.

I also, always try to code the site so I can float everything on the left, this does make things a lot easier in the long run.

I do use float:right when I need to (in place of absolute positioning usualy) but for setting up a column design, I float all columns to the left.

I always sort of knew I didn't need a clearing div but I usually just used it because it's quicker. Sometimes I clear:both on the following element, but sometimes the two floats are the last in the parent element, and they'll still wreck the rest of the page:

Basically, the <p> would be weird still. I'll experiment

I always have
.clear { clear:both; }
with me, so when ever I need to clear after floating it's easy to add clear to the next element without altering it's class, like:

<div class="left"></div>
<div class="right"></div>
<div class="nextElement clear"></div>

Originally Posted by aeryes I always have .clear { clear:both; } with me, so when ever I need to clear after floating it's easy to add clear to the next element without altering it's class, like: <div class="left"></div> <div class="right"></div> <div class="nextElement clear"></div>

I use this, and a mix of the clearfix, with the IE8 js library to force IE6 to behave nicely, which lets me use most of the pseudo classes in ie6, so clearfix works in ie6 aswell, and I can use :hover on any element

thanks for method