http://www.quirksmode.org/css/clearing.html

Well actually I was referring to block level content before the float, so I should have been clearer in my statement above and thanks for pointing it out

You would be surprised how many people put the float after the block level content they want to wrap around it and wonder why it doesn’t work.

As you correctly say inline content in the current line should be reflowed to the first available line on the other side of the float. Of course this is restricted to the current line and I can’t think of an example off the top of my head where this would be useful or desirable.

The only browsers that show this behavior (afaik) are Opera,safari, Konqueror and strangely enough explore 5.2mac.

As usual with CSS the devil is in the detail

Actually, that’s not true (if I understand correctly what you’re saying). According to the CSS2.1 specification (section 9.5):

“Any content in the current line before a floated box is reflowed in the first available line on the other side of the float.”

This works according to the specification in Opera 9, but Firefox 2 and IE6 are buggy and will shift a floated box down to the next line if there is inline content before it.

Thanks a lot!

I expect the bug is covered somewhere but I wouldn’t be surprised if there are other variations of it depending on the exact constructs used .

The display:inline-block for IE is basically a “haslayout” trigger and does the same job as the height:1% hack or zoom:1.0 etc (but I guess you knew that anyway).

It seems that if you apply a margin-top to the cleared paragraph that is less than the height of the floated content (including margins) then this margin-top distance is increased by the floated images height (including margins).

That’s gotta be the coolest IE bug ever, it’s just so wacky! Has it been documented anywhere else?

I usually use the overflow method myself but for those situations where it won’t work for IE, display: inline-block usually does the trick.

At first sight clearing sounds simple but there are are a lot of things to take into account. Its a pain that browsers vary but it’s not surprising as even some aspects of the specifications are ambiguous.

However, as mentioned in the article if you use the right approach then a lot of the bugs/discrepancies disappear and things get easier.

(I’ve used the free calipers for so long I thought I’d pay for the upgrade .It’s a useful tool and I have it running all day.

As a side effect of using it you will usually notice whether your IE page suffers from haslayout issues. If you have dragged the calipers across an IE page and the browser doesn’t redraw the page it usually means that there is a “haslayout” issue somewhere. This is nothing to do with calipers and would be evident on any widget (or window) that you drag across an IE page. )

It would seem to me that we need standards more than ever…

I’m just glad you are around Paul, because I can’t remember all this, fix, bug, hack stuff.

Oh, and nice new calipers, very sharp.