I cant believe this float bug… (Still effecting other tag after cleared)

[m4g1c14n]

Seriously serious… My head hurts, how can a CLEARED float still effecting all other TEXT and DIV ?? Even worse… it actually works perfectly well on Chrome, but bugged on FF4 and IE8 … Oh God… should i just avoid the God Damn FLOAT altogether or what?

http://ikt.co.id/bug/float-bug.html

Anyone have any correct solution for both FF4 and IE8?? or are they doing exactly the right behavior?! (so even when you have cleared a float, next TEXT of DIV Tag would still be effected by it?! I cant believe if this is the real intended behavior x_x

Please help,

Cheers and God Bless,
Chowi

[TheDoc]

Boxes are all over the place in Chrome – I have no idea what you’re trying to do.

[Mitchell]

Hi,

I think rather than using negative margins, try using

top:-20px;

This might fix it?

But looking at Firefox and Chrome, I still can’t work out how it should work!

[m4g1c14n]

Pay close attention on STRANGE Third Box and STRANGE Fourth Box
Those STRANGE third – fourth box is effected by float on other DIV (which has been cleared)
on Chrome12, you can see that STRANGE Third Box and Fourth, the text inside flow perfectly, while on FF4 and IE8, the text inside is floated againts certain DIV x_x

[m4g1c14n]

okay here is the updated version
http://ikt.co.id/bug/float-bug2.html

The box are all over the place, that is not the problem, i made it that way
What i want you guys pay close attention is the BLUE BOLDED and RED BOLDED BOX , the box that contains ‘Strange Third Box’ and ‘Strange Fourth Box’

Please pay close attention to the TEXT inside BLUE BOLDED BOX
and also the POSITION of RED BOLDED BOX
Both of them are floated incorrectly, indeed the Left Boxes have float in them, but i have perfectly clear it :| , why is it still effecting the subsequence div?

on CHROME12, it is perfect, none of those Strangeness occured , the text flow perfectly and of course the RED BOLDED BOX is positioned right below the BLUE BOLDED BOX

Again the problem is not the position, I intentionally scattered them to show the FLOAT bug that is plaguing FF4 and IE8 :(

[m4g1c14n]

here is the screenshot FF4 & IE8 against CHROME12
http://ikt.co.id/bug/float-bug.png

Again folks pay close attention only to the BLUE BOLDED BOX and RED BOLDED BOX

[wolfcry911]

Its not a float bug. In fact, I’m fairly certain that FF and IE have it right and Chrome is in error. It also has nothing to do with the clear property. Nothing in the specs state that a float that has been cleared by another element will have no effect on later elements. In fact, in 9.5 Floats it states that current and subsequent line boxes created next to the float are shortened as necessary. Clear only applies to block level elements; Clearance is introduced as spacing above the margin-top of an element. It is used to push the element vertically (typically downward), past the float (using one of two methods, but that’s not important here). Clear does nothing more – period. All three browsers have done exactly that. The negative margins on the subsequent elements placed them back into a position where the inline boxes were affected by the previous floats.

So why are there different renderings? In short, block formatting context. The ‘clear’ property does not consider floats inside the element itself or in other block formatting contexts. And inline boxes are reduced by floats only within the same block formatting context. So what creates a new BFC? A block formatting context is a box that satisfies at least one of the following:

• the value of “float” is not “none”
• the used value of “overflow” is not “visible”
• the value of “display” is “table-cell”, “table-caption”, or “inline-block”
• the value of “position” is neither “static” nor “relative”

Chrome believes you have done one of those (you haven’t). To see FF behave similar to Chrome simply make #maincontainer2 a new BFC (I’d add overflow: hidden, or float it). I haven’t tested anything in IE8…

[Author]

Posts