CSS clearfix problem with Firefox 2 and SeaMonkey

Question

I am using yaml for layout and famous clearfix css to make sure container with floats get extended.

Everything works fine with Firefox 3, IE6, IE7, IE8, Opera 9 and Google Chrome, but I have issue with Firefox 1, Firefox 2 and SeaMonkey. The problem is that clearfix container gets extended too much, as you can see on the website:

http://www.slagalica.tv/game/mojbroj

Here are screenshots of Firefox 2 and Firefox 3 rendering.

Update: Screenshots on BrowserShots.org

Unfortunately, stats show that more than 10% of my visitors are using FF2, so I cannot simply ignore the problem. I tried removing or tweaking some parts of clearfix CSS, but no matter what I do, the timer DIV (green) is separated by a large margin from the rest of the page.

Does anyone have an idea how to solve this?

Update2: I finally gave up and put TABLE tag and solved the issue in few minutes. So, don't try to look into HTML source - problem is not evident anymore.

Answer 1

clearfix is just a hack for the lazy or obsessive purist. Put a clearing div where you need it (at the bottom of your div) and get on with life.

<div>
   ... floated content ...
   <div style="clear:both"></div>
</div>

BTW. Purist who claim this breaks semantics are incorrect. The HTML specification defines no semantic meaning for <div>. At worst it mixes style/structure but it's hardly a burden to remove when the site is redesign in the future and a pure css solution becomes practical.

Answer 2

I looked at it using browsershots, and I'm trying really really hard to figure out what the difference between it in FF2, 3, and chrome is. I'm not seeing it.

Looking at your page though, why not do something along these lines?

 <div id='wrapper'>
      <div id="leftcol">
           Text
      </div>
      <div id="rightcol">
          text
      </div>
      <div id="foot">
           text
      </div>
 </div>

And the CSS:

 #wrapper{
      min-height:1%; //to fix IE6 floats escaping ancestor div
 }
 #leftcol{
      float:left;
 }
 #rightcol{
     float:left;
 }
 #foot{
 clear:both;
 }

Answer 3

Hello,

So if you look at the original article that promotes clearfix on positioniseverything, you will note that the author recommends that since the fix is out of date the reader should look at an article on sitepoint. This sitepoint article points out a method which I have been using for a long time now.

Very simply if you give the parent overflow: hidden and make sure it has 'layout' in IE then this will clear the internal floats.

<div id="wrapper">
     <div id="leftcol">
          Text
     </div>
     <div id="rightcol">
         text
     </div>
</div>

and then the corresponding CSS:

#wrapper{
  overflow:hidden;
  width: 100%;
}
#leftcol{
  float:left;
  width: 50%;
}
#rightcol{
  float:right;
  width: 50%;
}

In the above example I have used width: 100% to give layout to IE, but you could just as easily use zoom: 1 or height: 1% if you would rather.

Try replacing clearfix with this technique and your problem should be solved.

Things to bear in mind with this technique, be careful of your internal widths otherwise you may get clipping and it is important to override the wrapper in your print stylesheet as overflow: visible otherwise it will only print the first page. but I have been using this method in production successfully for years now and I have never had any unresolvable issues with it.

Answer 4

The best way to use a clearfix can be found at best clearfix ever. It doesn't use class names to fix the problem but an automatic solution that should be applied to all block level elements except for the p and footer elements.

Answer 5

Seems like this is a bug, and is fixed in newer versions. However, to maintain compatibility, tables have to be used instead of CSS.