ДИВ парит другие Дивы

Question

Проблемы: Div newline is hovering div gallery-preview

Я пытаюсь сделать ГАЛЕРЕИ предварительным просмотр и сделал DIV со столом. gallery-preview div является встроенным, чтобы быть в одной строке с другими. Как сделать newline div находится в нижней части gallery-preview divs line? И почему newline колеблется галерея-превью?

Мой HTML:

 <div class="content"> 
     <h1 class="title">New Photosets</h1> 
     <div class="gallery-preview"> 
      <table> 
       <tr> 
        <td> 
         <img src="image.png" class="gallery-preview-big-image" /> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <img src="image.png" class="gallery-preview-small-image" /> 
         <img src="image.png" class="gallery-preview-small-image" /> 
         <img src="image.png" class="gallery-preview-small-image" /> 
        </td> 
       </tr> 
      </table> 
     </div> 
     <div class="newline"></div> 

Мой CSS:

.newline{ 
    width: 300px; 
    height: 300px; 
    border: 1px solid black; 
} 
/* --------------- */ 
/* Content Gallery */ 

.gallery-preview{ 
    padding-right: 1%; 
    display: inline; 
    float: left; 
} 
.gallery-preview-big-image{ 
    width: 166px; 
    height: 166px; 
    padding-bottom: 10px; 
} 
.gallery-preview-small-image{ 
    width: 50px; 
    height: 50px; 
    padding-right: 4px; 
    display: inline; 
} 

/* --------- */ 

Answer 1

Это, вероятно, из-за float собственности.

Попробуйте добавить clear:both; в ваш стиль .newline.

Answer 2

If this is what you want

Чем вы просто должны удалить float:left из .gallery предварительного просмотра