How to not use <div class="clear"> in markup

Question

All the time my code is riddled with <div>'s that are used to clear/expand a div to look correct. Whenever it doesn't look correct, I add a <div style="clear:both;"> and it fixes the problem in IE7.

How do I avoid doing this? I mess with the overflow:auto, overflow:hidden and I get nothing.

Thanks in advance

Answer 1

One common method is the clearfix class. Instead of needing extraneous <div style="clear:both;"> elements (as you have been doing) after the floating element, you simply add this class to the floating element itself and the layout is automatically cleared after it.¹

My favorite one is from http://perishablepress.com/press/2009/12/06/new-clearfix-hack. It supports modern browsers as well as IE6 and IE7.

/* new clearfix */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Example (old/bad):

<div class="floatingrightmenu">This floats right</div>
<div style="clear:both;"></div>
<p>This text is cleared below it.</p>

Example (new with clearfix):

<div class="floatingrightmenu clearfix">This floats right</div>
<p>This text is cleared below it.</p>

---

^{1: Note: the automatic clearing means that it works best with single floated elements. If you wish to have multiple elements floated next to each other, put them all into a single container which is also floated and apply clearfix to that container.}

Answer 2

if you pop overflow:hidden; on the container of the floating elements that should work! dunno how cross browser it is however.