My HTML:
[HTML]<div style="position:relative;"><div id="mainbody">
<div class="containers">
<div class="tl"></div>
<div class="tm">Articles</div>
<div class="tr"></div>
</div>
<div class="containers">
<div class="ml"></div>
<div class="mm">1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br /></div>
<div class="mr"></div>
</div>
<div class="containers">
<div class="bl"></div>
<div class="bm"></div>
<div class="br"></div>
</div>
</div></div>[/HTML]
My CSS:
- #mainbody {
-
position:relative;
-
width:620px;
-
margin-left:20px;
-
margin-top:10px;
-
float:left;
-
}
-
#mainbody .containers {
-
position:relative;
-
}
-
#mainbody .containers .tl {
-
background:url(images/body_top_left.png) no-repeat;
-
margin:0;
-
padding:0;
-
width:24px;
-
height:24px;
-
float:left;
-
}
-
#mainbody .containers .tm {
-
background:url(images/body_top_midd.png) repeat-x;
-
margin:0;
-
padding:0;
-
width:572px;
-
height:21px;
-
float:left;
-
padding-top:3px;
-
font-family:Verdana, Arial, Helvetica, sans-serif;
-
color:#ffffff;
-
}
-
#mainbody .containers .tr {
-
background:url(images/body_top_righ.png) no-repeat;
-
margin:0;
-
padding:0;
-
width:24px;
-
height:24px;
-
float:left;
-
}
-
#mainbody .containers .ml {
-
background:url(images/body_mid_all.png) repeat-x #1c811c;
-
margin:0;
-
padding:0;
-
width:24px;
-
min-height:250px;
-
float:left;
-
}
-
#mainbody .containers .mm {
-
background:url(images/body_mid_all.png) repeat-x #1c811c;
-
margin:0;
-
padding:0;
-
width:571px;
-
min-height:250px;
-
float:left;
-
font-family:Verdana, Arial, Helvetica, sans-serif;
-
color:#ffffff;
-
}
-
#mainbody .containers .mr {
-
background:url(images/body_mid_all.png) repeat-x #1c811c;
-
margin:0;
-
padding:0;
-
width:24px;
-
min-height:250px;
-
float:left;
-
}
-
#mainbody .containers .bl {
-
background:url(images/body_bot_left.png) no-repeat;
-
margin:0;
-
padding:0;
-
width:23px;
-
height:23px;
-
float:left;
-
}
-
#mainbody .containers .bm {
-
background:url(images/body_bot_midd.png) repeat-x;
-
margin:0;
-
padding:0;
-
width:573px;
-
height:23px;
-
float:left;
-
}
-
#mainbody .containers .br {
-
background:url(images/body_bot_righ.png) no-repeat;
-
margin:0;
-
padding:0;
-
width:23px;
-
height:23px;
-
float:left;
-
}
My Problem:
When the text in (div with a class of mm), currently 1<br />, goes outside the min-height it all gets mixed around. Example of error at mediafire
Click Here to View 
