floats within a div

Hi i'm trying to make a div within the front page of my site that contains开发者_StackOverflow中文版 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...<a href="bloglink.php">read more </a></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...<a href="bloglink.php">read more </a></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;
}

---

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