overflow:auto

[midrange]

Anyone got this to work on a parent, cross-browser, as a way to avoid using an extra clearing div after floated elements? Read a lot about it, but I always end up having to use the clearing div.

 

[CrazyBob]

Yeah, use it all the time ...you just have to declare a width (I think height works too) on the wrapping div. Can also use overflow:hidden.

<div style="width:100%; overflow:hidden;">
  <div style="float:left; width:50%">
    float 1
  </div>
  <div style="float:left; width:50%">
    float 2
  </div>
</div>

 

[midrange]

Ah, didn't know about setting the width. Thanks, Bob.

 

[CrazyBob]

np

Clearing div's are so 2005 (or so )

I always try to use the best methods of clearing first, in this order:

1) a simple clear:both on a sibling element that appears directly after the floats (obviously only if such an element exists).
2) this overflow:hidden/auto one
3) the clearfix class (http://www.webtoolkit.info/css-clearfix.html)
.
.
.
.
.
.
4) if none of those are working out, only then do I resort to an extra clear div - only ever ran into this issue once, and then it was just for IE where i used conditionals.

 

[midrange]

Aye, the clearing divs have been bugging me.