bleeding <div>

Hi, first post here. I couldn’t find a solution by searching, so here is my problem:

I have a page with several div’s in each other. Trouble appears when one div contains a lot of text. In IE it shows ok, but in Mozilla the div “bleeds” through the main design.

I have a sketch of it: [IMG]http://strang.endofinternet.net/div/bleed.gif[/IMG]

The CSS is as follows:

[CODE]
div#wrapper {
width: 800px;
border-right: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
}

div#maincontents { /* ie can see me */
margin: 10px 0 10px 0;
padding: 40px 0 10px 15px;
width: 785px;
height: 424px;
}
head:first-child+body div#maincontents { /* ie can’t see me */
height: 0%;
min-height: 424px;
height: auto;
}
div#mainsquare { /* ie can see me */
float: left;
border: 1px solid #d0d0d0;
width: 543px;
height: 380px;
padding: 10px 20px 10px 10px;
}
head:first-child+body div#mainsquare { /* ie can’t see me */
height: 0%;
min-height: 380px;
height: auto;
}
div#imagesquare {
float: right;
width: 170px;
height: 195px;
margin-right: 15px;
border: 1px solid #d0d0d0;
}
div#newssquare {
float: right;
width: 170px;
margin-right: 15px;
margin-top: 8px;
min-height: 195px;
height: 195px;
border: 1px solid #d0d0d0;
background-color: #fff;
}
[/CODE]

Is there a solution to this problem. First I had trouble getting IE to understand that I needed a min-height of the squares, and now this in Mozilla…

Also in #CSS _↴