Hello, all. Sorry if this comes across a bit terse, but I'm at the mental breaking point. I'm trying to use pure CSS for my layout (meaning not a table to be found), but I hit a snag that could seriously kill my efforts. I have a document that has a container div and two, side-by-side floating divs (one left, one right). Simple, yes? Um... no. Here's the deal... In Standards Compliant Browsers (i.e., Firefox), none of the divs involved expand, regardless of how deep vertically the content runs. However, in quirky, nutty IE, everything flows perfectly. Further reading on the matter lead me to discover the following: Firefox, being a truly compliant browser (or at least gets an A for effort), knows that floating elements are outside of the normal page flow. Therefore, when calculating page height, floating elements just don't figure in because they are effectively ghosts - treated like nothing is there. IE, which does its own thing, doesn't give a whit about any of it and calculates the page height including floating elements. Ironically, that means that, in this situation, IE being "broken" is rendering exactly what I want, versus the complaint browser. Also, from what I've ready, there is no easy way around this problem for Standards Compliant browsers. I've tried every suggested method I could think of - clearing floats before the container's end-div tag, etc. I've also seen other solutions that, ironically, may work in one browser, but cause another to barf due to use of "undefined properties" or some such. The point is, nothing thus far has worked. Have I missed something? Because of the layout that I'm trying to achieve, it looks like I have two remaining options - Javascript or use a table to control structure (only for layout, though, not for anything else). And I don't know much Javascript (plus, that can go wonky in certain browsers too). What really is getting me is that I've spent DAYS on this, when I could simply use one table to control the macro-structure and be done in about 15 minutes. Is there any clean, simple CSS method that can take a container with two floating side-by-side divs and make the page render predictably cross-browser (at least for the major ones) the way a table can without all those horrible hacks that will probably break with the next browser upgrade? Thanks in advance for any suggestions.
Remember that floats are attached to the page at the top, and are still half in the document (meaning, while blocks don't see the floats, inline elements do). The bottoms of the floats are "sticking out". Either enclosing or clearing the floats kindof tucks just the very bottom back into the document. They are not like absolutely positioned elements which are taken completely out of the document. IE will enclose or wrap floats if their container has layout (Haslayout is triggered). Usually setting a width, height, position or float can do this. This is why buggy IE is doing what you want-- enclosing the float. If the floats' container didn't have layout, then IE would treat the page like compliant browsers (would not wrap the floats). Extra goofiness in IE : )