By Milan Babuškov


2009-08-09 11:41:40 8 Comments

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.

4 comments

@Milan Babuškov 2010-08-02 17:00:06

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

@Natalie Downe 2009-08-10 12:58:34

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.

@Milan Babuškov 2009-08-11 08:54:10

Please note that my general page layout works (they way you suggest), but that is not the problem. Try opening the URL I gave in Firefox 2 and in Firefox 3 or IE to see the real problem. In the right column I have a set of SPANs that need to float (otherwise I don't know how to create "boxes" without using tables) and I enclose those in additional DIV to ensure proper spacing. Problem is that Firefox 2 assigns much more space than SPANs are using, and I cannot figure out why.

@Chris Sobolewski 2009-08-09 17:06:51

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;
 }

@Milan Babuškov 2009-08-09 21:14:12

Maybe browsershots is doing something to it. Here are the screenshots: slagalica.tv/firefox2.jpg and slagalica.tv/firefox3.jpg

@SpliFF 2009-08-09 13:32:51

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.

@Milan Babuškov 2009-08-09 14:07:50

But if I do it like that, the flow of content gets 'broken'. Care to take the HTML of the page at URL I gave and show how exactly would you do it?

@Andrew Moore 2009-08-09 21:16:45

@SpliFF: There are plenty of valid reasons why you would want to use clearfix instead of a inline div. Your div adds 30 bytes per div you are adding, and makes maintenance an hell. A particular class needs clearing always, you can simply add it to your CSS using the clearfix method and be done with it. Much more easy to maintain, and a lot less headaches. But then again, maybe I'm just an obsessive purist...

@Andrew Moore 2009-08-09 21:29:20

And the HTML specification defines a <div> (and <span>) as generic containers... I don't see that <div> contain anything.

@Natalie Downe 2009-08-10 13:05:16

confession: I am an obsessive purist :) - however there is actually semantic meaning to div, it is a division of the page. On occaision there are layouts that cannot be solved using the overflow hidden or the clearfix technique (which have simmilar applications - albeit the clearfix technique is outdated). On those occaisions a clearing element is needed, however, using a div is overboard, it is not a division of a page here. why not use a 'br' element with the style clear: both. Call a spade a spade, its an ugly hack use a presentational element to do so.

Related Questions

Sponsored Content

11 Answered Questions

[SOLVED] Targeting only Firefox with CSS

  • 2009-06-04 20:19:09
  • avdgaag
  • 552628 View
  • 596 Score
  • 11 Answer
  • Tags:   css firefox css-hack

27 Answered Questions

[SOLVED] Set cellpadding and cellspacing in CSS?

10 Answered Questions

[SOLVED] What is a clearfix?

28 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1513195 View
  • 2218 Score
  • 28 Answer
  • Tags:   html css opacity

35 Answered Questions

[SOLVED] Change an HTML5 input's placeholder color with CSS

19 Answered Questions

[SOLVED] Is it possible to apply CSS to half of a character?

31 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 1859335 View
  • 2996 Score
  • 31 Answer
  • Tags:   css css-selectors

29 Answered Questions

[SOLVED] What methods of ‘clearfix’ can I use?

  • 2008-10-17 08:15:36
  • Chris J Allen
  • 464739 View
  • 856 Score
  • 29 Answer
  • Tags:   css clearfix

Sponsored Content