Div overflow problem

[trivektor]

Hi,

I have a page located at: http://tri.phongnguyen.net/tri/ The content on the left (Who is Tri Vuong, what is he up to blah blah) is contained in a div (id=content) and that div is sitting inside another div (id="main"). Now if I remove the overflow:auto property from main's style, the page will look messed up, it seems like "main" doesn't remember that it is containing another div inside, and that div happens to be longer in length. I looked at other pages on the internet and found that they didn't use the overflow property, but the page still didn't get messed up. Does anyone know how to solve this problem without using the overflow property? I was viewing the page on Firefox 2.0.0.12 btw. Thanks.

[Centauri]

As the content div is floated, it is removed from the document flow, and the height of main would then collapse as if content was not there. The float has to be "cleared" to force main to surround floats, and the overflow property is a common way of doing this. Do you have some other issue with the overflow to prompt you to want to remove it ?

[trivektor]

Thanks for the reply. I'm just curious how other pages don't use the overflow property and still get displayed properly.

[Centauri]

Could be many reasons - they may not have the content floated, they may have a footer set to clear the floats, they may have a clearing div or hr - many ways to achieve the same result.