Div Wrapping In IE6 Only

Question

You can see the issue here: http://jsfiddle.net/6WuVz/7/

This works in all other browser (image top) but when viewed in ie6 (image bottom) it wraps incorrectly:

Note: You can see this in later versions of IE by using compatibility view and selecting IE5 Quirks.

Answer 1

From what I can tell, the div that holds your title doesn't have a set width. Therefore, IE is telling it to expand, and as it expands, it shifts downward, where there's space. Try setting a width for IE6 only and see if that fixes it.

Additionally, IE6 has some issues with overflow: hidden . Though it's usually in combination with position: relative , you may be running into something similar. If the previous solution doesn't work, you could try this.

Edit - Since you don't want to set an explicit width, I've thought of a few other options left to you:

1. Explicitly set clear: none on the non-floated element
2. Use a span element instead of div for the text in question ( span is inline, while div is block, so it shouldn't expand to the parent width; given what you're doing, it probably makes more semantic sense to use span , anyway).
3. Use JavaScript to determine the width of the floated div for IE6, and set a size on the non-floated div accordingly (again, you can use conditional comments in your HTML to target IE6 exclusively)
4. Seriously consider whether it's worth supporting IE6 (ie - if this is on a site where the audience is fairly tech-savvy, you can probably forego IE6 support entirely, or at the very least, fixing this problem will cost your project more than the returns you get; but if you're dealing with healthcare providers, you probably have to still deal with IE6).

IE6 has a non-standard box model, which tells block-level elements to expand the full width of their container, instead of "shrink-wrapping" to their content. Their content is larger than the width they're allowing, and the float property takes the floated elements out of the document flow (which is why your overflow: hidden , when turned to overflow: visible , runs over top the floated content). The newer browsers have basically an "updated definition" (so to speak) of the float property, which tells sibling content to flow around the floated element, in addition to taking it out of the normal document flow. CSS-tricks has a good article on float , as does A List Apart , if you need more information.