css clearfix behavior not the same for firefox and chrome

Question

i am using this class for css clearfix on a div which has a calculated width of 0, but has content of width x in it.

.clearfix {
 *zoom: 1;
 &:before,
 &:after {
   display: table;
   content: "";
 }
 &:after {
   clear: both;
 }
}

What is happening is that in chrome after i use this class, the div takes the width of its content. But in firefox, the div takes the width of its parent.

Shouldn't the behavior be that the div takes the width of its content in both browsers? What can be the issue?

_OT: I will never understand why people use these extremely ugly kind of clearfixes …_ — CBroe, Apr 02 '13 at 14:55
Can you post a jsFiddle or at least a complete code example? — j08691, Apr 02 '13 at 14:58

score 2 · Answer 1 · answered Apr 02 '13 at 14:57

2

If it doesn't interfere with your other styles, you can use overflow: hidden; to force a container to expand for floated content, etc.

See this jsFiddle: http://jsfiddle.net/mBSCj/ which works in all major browsers.

answered Apr 02 '13 at 14:57

metadept

7,831
2
18
25

1

As long as you don't have overflowing content (think drop menu), this is a perfectly fine way of going about clearing floats. – cimmanon Apr 02 '13 at 15:11
@cimmanon Yeah I've tripped myself up a couple of times when I forgot I was using it, but I've generally found this to be the most concise and consistent method, particularly because it doesn't require extra elements or pseudo-elements. – metadept Apr 02 '13 at 15:18

score 1 · Answer 2 · answered Apr 02 '13 at 16:00

There is one other method for clearing floats without using additional markup. It predates the micro clearfix by quite a few years.

http://www.positioniseverything.net/easyclearing.html

.clearfix:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

css clearfix behavior not the same for firefox and chrome

2 Answers2