alt131 - 4:21 pm on Sep 12, 2011 (gmt 0)
Hi snehula, and thanks for the great code sample - makes things a lot less mysterious :)
Well what happens is that the content div will have a height of about 2 centimiter (this is because I have a ;nbsp enclosed in a h2 tag in it) and the rest of the elements (which are also placed inside the content div) appear outside of it. This is a mystery to me..
As you say, div#contents is taking it's height from the <h2> and not expanding to contain #contents ul#sidemenu and #contents #rightcol. But this isn't caused by "zero-ing" margins/padding, but because both are floated. I just typed about this in another active thread, so to save re-typing, see the first paragraph [webmasterworld.com] of my last post. Note that's not the best explanation, just saving typing, and it provides some keywords to search on.
Follow the link in that first para, and after you've read "Positioning schemes", scroll down to 9.5 Floats. The key sentence is If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.
The above thread discusses clearing as well - note Marshall's post which should help with the "float drop" you are seeing on the menu, and there is more in-depth information about floats and clearing in Opera's Web Standards Curriculum [dev.opera.com] (scroll down for the TOC), plus lots of other information that will be helpful if you're just starting with css.