Javascript-форум - Обтекание float

Есть страница с такой версткой:

<body>
    <div>
      <div class="line-album">
        <div class="line-album-left">
          <img src="i/noalbum.png" alt=""/>
        </div>
        <div class="line-album-right">
          <p>Название</p>
          <p>0 фотографий</p>
          <p></p>
          <p>Доступен</p>
        </div>
      </div>
      <div class="line-album">
        <div class="line-album-left">
          <img src="i/noalbum.png" alt=""/>
        </div>
        <div class="line-album-right">
          <p>Название</p>
          <p>0 фотографий</p>
          <p></p>
          <p>Доступен</p>
        </div>
      </div>
    </div>
  </body>

CSS-файл:

.line-album-left{
  float: left;  
  width: 50%;
}
.line-album-right{
  float: right;
  width: 50%;
}

Вот ссылка на страницу:
http://178.162.248.149/~sergc578/simple/

Скриншот:

Такой вопрос: почему блок с классом line-album-right вылазит из блока с классом line-album? Я пытаюсь сделать, чтобы был блок line-album, в нем слева line-album-left, справа line-album-right. И таких "строк" много.