18

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

braX
  • 11,506
  • 5
  • 20
  • 33
Tom
  • 459
  • 2
  • 4
  • 17
  • 4
    Can you show some code for the uninitiated to demo this issue? – Chris Farmer Jul 13 '11 at 15:52
  • 3
    clear: both is often required to push content below a floated element. There is (usually) nothing wrong with using it. – George Cummins Jul 13 '11 at 15:53
  • possible duplicate of [In 2011, is there any need for clearfix?](http://stackoverflow.com/questions/5565668/in-2011-is-there-any-need-for-clearfix) and [Which method of 'clearfix' is best?](http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best) – BoltClock Jul 13 '11 at 16:03
  • 1
    Also useful: [Which method of clearfix is best](http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best) – George Cummins Jul 13 '11 at 16:12
  • @George that is a great link, thanks. – Nicole Jul 13 '11 at 17:22

3 Answers3

35

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.1

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.

Nicole
  • 32,841
  • 11
  • 75
  • 101
  • 2
    @Kristian - I did not interpret the question that way. I interpreted it to say that he wishes to avoid "code is riddled with `
    `'s", in other words, having to place `
    ` *after* floated elements. This is the exact fix for that.
     – Nicole Jul 13 '11 at 15:57
  • 1
    @Kristian Antonsen No, he wants to avoid empty div's with `clear: both`. This clearfix class should be added to the container which holds the floating elements. If done, he get rid of the empty div's. – DanielB Jul 13 '11 at 15:57
  • @Renesis, @DanielB If that's the case, I believe (for the most part) there still are ways to avoid using either. Still waiting for a demo issue, though. – kba Jul 13 '11 at 16:01
  • This could, in same cases, be exactly what you need. Although this option gives less flexibility when creating responsive websites. clear:both; is ugly, but it works. – WIWIWWIISpitFire Jun 19 '14 at 07:41
3

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

Treemonkey
  • 2,133
  • 11
  • 24
1

In Cascade Framework I apply the micro-clearfix by default on block level elements. This allows you to avoid the use of stuff like <div style="clear:both;"> or <div class="clearfix"> with but very minimal side-effects. And if you really want traditional behavior for block level elements, absolute positioning should do the trick. Check out Cascade Framework for yourself to get an idea of how practical it really is.

John Slegers
  • 45,213
  • 22
  • 199
  • 169
  • When I navigate to Cascade Framework, I see only a couple of paragraphs. There is no code at all. – David A. Gray Mar 11 '20 at 15:08
  • @DavidA.Gray : Thanks for pointing this out. I no longer own the domain name cascade-framework.com and forgot to update these links to point to the github demo for this project instead. I just updated my answer with the correct URL! – John Slegers Mar 11 '20 at 16:38