плавает в div

Question

Привет, я пытаюсь сделать div на первой странице моего сайта, который содержит плавающий img и немного плавающего текста h3, p и a.Затем я хочу зациклить div ниже с другим текстом / рис.Когда я делаю это один раз, он работает нормально, но контейнерный элемент не растягивается, чтобы соответствовать содержимому.Поэтому, когда я добавляю еще один ниже, он перекрывается.

код:

<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;
}

Answer 1

Элементы уровня блока, чтобы не расширяться до высоты плавающих элементов, если вы не скажете им. Вы должны добавить очищающий элемент после последнего плавающего элемента, чтобы решить эту проблему. Вместо:

      </div>
</div>

Использование:

      </div>
      <br style="clear: both"/>
</div>

Подробное объяснение этого решения, а также альтернативного решения см. В: http://www.quirksmode.org/css/clearing.html