I have a page with a floated form-containing div (#formblok). If I don't float it, I get an irrepairable gap between my header and main container. So far it works. Inside this floated (left) form-containing div (#formblok), I have another div containing more floats (#vantot). So of course this div (#vantot) never expands to full height. A clearing div did not work, even though another clearing div (for the main container) does work. So I tried overflow: hidden (after trying auto) and cool, my #vantot div now seems cleared. However, the starting point changed from the side of the #formblok div (like it was before adding overflow:hidden) to 255px to the right (which is the width of my labels in my form, so it's seems they have a say). I used hidden and not auto because auto sometimes gives me a scroll bar (and sometimes not ???) and this time it did, which was ugly and unneeded. (For those who need visuals, copy http://stommepoes.jobva.nl/Pizzaatje/invoeren.html and http://stommepoes.jobva.nl/Pizzaatje/pizza.css and remove overflow:hidden from #vantot and give it and #formblok background colours. Yes the css is long but I'm forced to try to style stupid crap-written generated html templates >: ( ) I totally don't understand what overflows do with divs (other than of course what they do with the content within). Why do my margins change? Or really, why do my reference points change? A link to an article with images showing these differences (and not what happens to the content inside; my books already explain this) would be nice. I don't like using something and have to guess where it'll stick my blocks. *Edit, I should note that all this testing was done quickly with FireFox, which I've heard has some problems with floats and clearing. But of course if it doesn't work in Mozilla, it doesn't work for me or my company.
Well, even though it won't do you a bit of good (I'm about to head to bed so I can't look at this in detail), but have you tried validating the HTML errors on the page (changing & to & ; but without the space between p and ; for example)?
All the errors are in a script I'm not allowed to touch (stupid OneStat). The only thing I can do to validate that garbage is sticking the noscript stuff in a <p> (otherwise the inline a is just hanging loose) and giving the img an alt tag. I did find something out while dicking with IE7. When I decreased my text size tremendously, the floated box went back to what it was before overflow was added. So now I think it was some line-height overhang from the above element (though why overflow:hidden would make that matter I have no clue because overflow is just weird...) But giving more space between the two, my box went back to where it needs to be and then I added back the left margin to center it. Why I couldn't clear a float within a float, I still don't know. And IE6 still stacks my boxes. But that's IE6 and I'm happy that it sits normally with RoW and IE6 people can still use it.