How to get boxes to expand vertically; also IE 6 issues

I am developing a shell for a site I am developing in CSS. I have the basics down, but have a couple of problems. Here is the URL of what I have so far:

http://www.denverderm.com/div_test/css_test.asp

* how do you get the boxes to expand vertically? What I want to do is have the div on the left (next to the nav, in the darker green) and the div containing nav to expand as I start flowing text into the main text div (the one that says "Botox") now. Also, the container div needs to expand as well (it has a white background and I inset the other divs to make a thin white border.

* I'm also having IE 6 problems:
* there is white space between the rows of divs that shouldn't be there
* the rollover div dropdowns come up way over to the right
* firefox displays both these issues the way I indended for them to be

If you need access to the .css that drives the rollover dropdowns, it is here:
http://www.denverderm.com/div_test/mm_css_menu.js


Any help greatly appreciated.

Thanks in advance

John MR

*

 

You have not enclosed the float descendants of #live_area-wrapper. A quick and dirty fix is to add this immediately after the #live_area-wrapper ruleset.

#live_area-wrapper:after {
    content: ".";
    font-size: 0;
    display: block;
    visibility: hidden;
    clear: both;
    }

Code (markup):

See 'Enclosing Float Elements' for more info.

cheers,

gary

 

Ok, to make them expand vertically, add repeat-y to the background function. So it'd be like:

.box {
 background: url(image.gif) repeat-y;
}

Code (markup):

If you get what I mean.

Hopefully this should help you.

Thanks,
S92