Плавающее изображение вылетает из контейнера div в другой div

Question

У меня есть этот макет, над которым я работаю, и на частях сообщений (это похоже на блог), я хочу, чтобы это выглядело так (игнорируйте тонкие различия в изображениях/стили, это было взято из PSD):

так что я попытался кодирование его, с признаками изображения новостей набора плавать слева, как я хочу, описание поста, чтобы просто быть в своем праве , Img установлен в 300px в качестве стандарта, причем высота должна варьироваться в зависимости от того, каково бы это было. Для части тегов у нее есть собственный div.

Итак, я пробовал кодировать его как таковой, и по какой-то причине изображение с изображением истекало из его контейнера div, теперь перекрывая теги div (see the actual page here). Посмотрите, как под ним располагаются теги div? Это моя проблема. Я хочу, чтобы теги div имели свою собственную строку под изображенным изображением. Я не знаю, почему изображение истекает кровью из своего div.

(я просто вывесить соответствующие области, так как это единственная часть у меня возникли проблемы с):

<div id="newsmain"> 

         <div id="titlearea"> 

          <div class="comment_bubble"> 

           <a href="">9</a> 

          </div> 

           <span class="post_titles"><a href="">Colored Prototypes of Alter's Tales of Vesperia Estelle Figure - Pre-orders Now Open!</a></span><br /> 

           <span class="under_titles">POSTED BY <a href="">A745</a> | APRIL 27, 2013 | 8:00pm GMT | FILED UNDER: <a href="">TALES NEWS</a></span> 

         </div> 

       <!-- NEWS BODY --> 

         <div class="newsbody"> 

          <a href=""><img class="featured_image" src="http://gallery.abyssalchronicles.com/albums/userpics/10002/estelle_10.jpg" alt="" /></a> 


          Alter has released pictures of the colored prototype of their upcoming <em>Tales of Vesperia 1/8 Scale Estelle figure</em>. Some shops also have pre-orders open. In addition, the <em>Milla Maxwell plushie</em>, also by Alter, has some pre-orders open as well. 
          <br /><br /><br /> 

          <a href="">READ THE REST »</a> 

         </div> 

          <div class="tagsline"> 

          TAGS: <a href="">TALES OF VESPERIA</a>, <a href="">TALES OF XILLIA</a>, <a href="">ESTELLE</a>, <a href="">MILLA MAXWELL</a>, <a href="">MERCHANDISE</a>, <a href="">PS3</a>, <a href="">XBOB360</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, 

          </div> 

        </div> 

И CSS для этого:

#newsheader { 
    width: 628px; 
    background: #3396cf; 
    font-family: 'Merriweather Sans', Tahoma, Helvetica, Arial, Verdana, sans-serif; 
    font-weight: bold; 
    color: #ffffff; 
    font-size: 18px; 
    padding: 5px; 
    margin-bottom: 10px; 
} 

#titlearea { 
    width: 628px; 
    border-left: 9px solid #da5099; 
    border-bottom: 1px solid #c5a7bc; 
    padding: 2px 0 1px 4px; 
} 

.comment_bubble { 
    width: 50px; 
    height: 35px; 
    padding-top: 3px; 
    text-align: center; 
    color: #ffffff; 
    font-family: Georgia, Arial, Tahoma, Verdana, sans-serif; 
    font-size: 15px; 
    font-weight: bold; 
    background: url('images/commentbubble.png') no-repeat left top; 
    float: right; 
} 

.comment_bubble a { 
    color: #ffffff; 
    text-decoration: none; 
    display: block; 
    width: 100%; 
    height: 100%; 
} 


.post_titles { 
    color: #6c053c; 
    font-family: 'Merriweather Sans', Tahoma, Helvetica, Arial, Verdana, sans-serif; 
    font-weight: bold; 
    font-size: 17px; 
    padding: 0; 
} 

.post_titles a { 
    color: #6c053c; 
    text-decoration: none; 
} 

.post_titles a:hover { 
    color: #ba0767; 
} 

.tagsline { 
    font-family: Helvetica, Arial, Verdana, sans-serif; 
    font-weight: bold; 
    font-size: 11px; 
    color: #636262; 
    padding: 5px 5px 3px 13px; 
    border-bottom: 1px solid #c5a7bc; 
    text-transform: uppercase; 
} 

.tagsline a { 
    color: #868889; 
    text-decoration: none; 
    width: 100%; 
} 

.tagsline a:hover { 
    color: #000000; 
} 

.under_titles { 
    font-family: Helvetica, Arial, Verdana, sans-serif; 
    font-weight: bold; 
    font-size: 11px; 
    color: #636262; 
    padding: 0; 
    text-transform: uppercase; 
} 

.under_titles a { 
    color: #868889; 
    text-decoration: none; 
} 

.under_titles a:hover { 
    color: #000000; 
} 

.newsbody { 
    padding: 9px 8px 15px 13px; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #000000; 
} 

.featured_image { 
    border: 0px; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    width: 300px; 
    height: auto; 
    float: left; 
    text-align: left; 
} 

Спасибо, ребята.

Answer 1

Добавьте это в CSS:

#newsmain {overflow: hidden;} 
.tagsline {clear: both;} 

Первая строка не строго необходимо, но это поможет контейнер, чтобы обернуть вокруг содержимого. Поплавки будут выходить из своих контейнеров, если не используется какой-либо метод, и overflow: hidden - самый простой способ (хотя он не подходит во всех ситуациях).

Answer 2

где бы вы сделать плавающим, сразу после этих плавающих элементов, которые вы должны поместить этот код:

<div style="float: none; clear:both;"> </div> 

это позволяет избежать дублирования содержимого.