Mozilla <div> problem

[drowned]

I am using div#container and then some more <div>'s inside it. How do I make Mozilla recognize that the container should wrap up everything. I have a div#mainContent, which is right floating inside the div#container and has content that goes below the container. Mozilla doesn't recognize that :( so the content is just floating around unwrapped when you scroll to the bottom of the page.

Here is my two <div> elements:

#container {
font-family: Helvetica, Arial, sans-serf;
color: #FFFACD;
background-color: #8FBC8F;
width: 760px;
height: 100%;
position: relative;
margin: auto;
margin-top: -15px;
margin-bottom: 0px;
padding: 0;
text-align: left;
overflow: visible;
}

#mainContent {
display: block;
font-family: Helvetica, Arial, sans-serif;
font-size: 1.0em;
width: 500px;
height: 600px;
float: right;
padding-left: 10px;
padding-right: 10px;
margin-top: 20px;
margin-right: 40px;
}

[drhowarddrfine]

Parent elements are NOT to expand to contain floated elements so Mozilla is behaving correctly. I assume you see this happening in IE but this is an IE bug and incorrect behavior. Try changing overflow:visible to overflow:auto and see if that does what you want. Otherwise, we need to see the complete code or a link.