Different Rendering from Chrome and Firefox When Having Floated Children in a Floated Div with No Width.

Firefox trouble . A float container is longer than the child?

You're floating #footer-logo, and having #footer-logo img scale according to the space made available to #footer-logo by the pseudo-element. Note that floated elements shrink to fit their contents by default, and the shrink-to-fit algorithm may vary across browsers, although in this case I would expect the browser to calculate the width of the image, then have #footer-logo shrink to fit that width accordingly.

It looks like browsers other than Chrome choose to calculate the width of #footer-logo according to the actual width (or intrinsic width) of the image, and then keep it fixed at that value (it does not expand even when the image starts growing larger than its original size). The height continues to scale as normal, since you set its height to 100% of its parent (and the parent height is determined by the padding from its pseudo-element).

But the behavior you see in other browsers is nothing compared to Chrome. If you make the #footer-logo img semi-transparent in order to get a peek at how #footer-logo is being rendered:

#footer-logo img
{
    height:100%;
    width:auto;
    opacity:0.5;
}

You'll see that Chrome doesn't even render #footer-logo at all until you mess with the page zoom. Not resize the browser, but zoom the page.

And once you do manage to get it to render, Chrome starts behaving somewhat (only somewhat) like the other browsers, fixing the width of #footer-logo at whatever it was rendered at. Where it differs is that when you scale down the page, the image will not become any smaller than #footer-logo, as though it were forcing a minimum width on the image. Again, this never happens on any of the other browsers.

And every time you change the page zoom, Chrome redraws both #footer-logo and the image.

This is the first time I've seen an edge case in CSS where every browser manages to demonstrate spectacularly buggy behavior (with Chrome just completely falling apart, unsurprisingly).

CSS Floating Bug in Google Chrome

It seems to be a bug. The problem appears when applying clear on the wrapper element. When you remove the clear, the bug goes away.

According to the W3C specs regarding the clear property:

This property indicates which sides of an element's box(es) may not be
adjacent to an earlier floating box. The 'clear' property does not
consider floats inside the element itself or in other block formatting
contexts.

So it shouldn't effect the children's floating behaviour. I filed a bug report at Chrome about this issue.

Update: From the link in the comments, kjtocool mentioned on 30-03-2013:

It appears that this issue has been corrected in version 26.0.1410.43

Div rendering incorrectly in Firefox

Your issue is known as the clearfix problem. It is not only occuring in FF, but also in webkit browsers (safari and chrome). I even think that only IE handles it as you state you expect it to.

The problem only occurs when you have a parent div container, with all its children floating inside it. For a better explanation i suggest googling 'clearfix'.

The solution stated by @Kev does indeed work, but it requires you to a an extra element to your DOM, wich is only used for styling, wich is considered bad practice. I suggest working with some sort .clearfix class. I usualy work with the one from twitter bootstrap:

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

All you have to do is apply it to your #divTop container and you should be fine. An explanation on how and why it works can be found here: http://nicolasgallagher.com/micro-clearfix-hack/

IE7 and Firefox 3 Rendering Difference

Your problem is that IE7 clears the parent element so that it contains the floating child. This is not how it should be rendered. Better explanations by other posters.

Simple fix: apply overflow: hidden; to your #body:

#body {
    overflow: hidden;
}

See this post for an explanation.

Children of Floated Elements Not Re-Positioning in Chrome/Safari

The fix from this answer fixes it for me:

.float {
    -webkit-transform: scale3d(1,1,1);
}

http://jsfiddle.net/thirtydot/GYFqU/3/

Similarly to what I said in that answer, this also appears to be a WebKit rendering bug.

I also said "I'm not sure if there are any downsides to this fix", and the same thing still applies, but that answer is now over a year old with +20/-0 votes and no negative comments, so I guess it's fine.

HTML/CSS - Why does float:left render as 'invisible'?

Insert the third div:

<div style="clear:both;"></div>

---

Related Topics