floats within a div - html

Question

Hi i'm trying to make a div within the front page of my site that contains a floating img and some floating text h3, p and a . I then want to loop the div below with different text/pic . When i do this once it works fine but the container div hasn't stretched to fit the content . So when I add another below it overlaps .
code:
<div id="blog">
<h1>BLOG</h1>
<div id="postcont">
<img src="blog1.png" width="40" height="40" />
<h3>Playing At The Phenoix</h3>
<p>So we arrived down at the phenoix about 10 past ten .Rommy was all ready out of it and wasn't sure if he could do...read more </p
>
</div>
<div id="postcont">
<img src="blog1.png" width="40" height="40" />
<h3>Playing At The Phenoix</h3>
<p>So we arrived down at the phenoix about 10 past ten .Rommy was all ready out of it and wasn't sure if he could do...read more </p
>
</div>
</div>
#blog {
float:left;
width:400px;
border-top:#0FF solid 6px;
}
#postcont {
padding:10px;
border-top:1px #FFF solid;
margin-top:10px;
}
#blog h1 {
font-size:20px;
color:#FFF;
padding:10px;
padding-left:0px;
letter-spacing:2px;
}
#blog p {
font-size:15px;
color:#FFF;
float:right;
clear:right;
width:300px;
margin-right:30px;
letter-spacing:2px;
margin-top:5px;
}
#blog a {
font-size:15px;
color:#FFF;
float:right;
clear:right;
width:300px;
margin-right:0px;
letter-spacing:2px;
margin-top:5px;
font-style:italic;
text-decoration:underline;
}
#blog h3 {
font-size:15px;
color:#FFF;
float:right;
clear:right;
width:300px;
margin-right:30px;
letter-spacing:2px;
margin-top:5px;
font-weight:bold;
}
#blog img {
float:left;
clear:left;
}

Answer 1

Block-level elements to not expand to the height of floated elements unless you tell them to. You should add a clearing-element after the last floated element to fix this problem. Instead of:
</div>
</div>
Use:
</div>
<br style="clear: both"/>
</div>
For an extended explanation of this solution, as well as an alternative solution, please see: http://www.quirksmode.org/css/clearing.html