CSS Images float left error

Question

Я - дизайнер пользовательского интерфейса. Я хочу, чтобы каждое изображение плавало слева под другим. Но похоже. http://delhiwebdesigner.com/images/Capture.png Пожалуйста, проверьте, где проблема. Ниже мои HTML и CSS коды:

<div class="books-container"> 
<article class="entry"> 
         <img src="images/books/1.jpg" alt="" title="" /> 
         <a href="#"> 
          <div class="text"> 
           <p class="head">LeMans</p> 
           <p class="title">LeMans</p> 
          </div> 
         </a> 
        </article> 

<article class="entry"> 
         <img src="images/books/2.jpg" alt="" title="" /> 
         <a href="#"> 
          <div class="text"> 
           <p class="head">LeMans</p> 
           <p class="title">LeMans</p> 
          </div> 
         </a> 
        </article> 

<article class="entry"> 
         <img src="images/books/4.jpg" alt="" title="" /> 
         <a href="#"> 
          <div class="text"> 
           <p class="head">LeMans</p> 
           <p class="title">LeMans</p> 
          </div> 
         </a> 
        </article> 

<article class="entry"> 
         <img src="images/books/3.jpg" alt="" title="" /> 
         <a href="#"> 
          <div class="text"> 
           <p class="head">LeMans</p> 
           <p class="title">LeMans</p> 
          </div> 
         </a> 
        </article> 

<article class="entry"> 
         <img src="images/books/5.jpg" alt="" title="" /> 
         <a href="#"> 
          <div class="text"> 
           <p class="head">LeMans</p> 
           <p class="title">LeMans</p> 
          </div> 
         </a> 
        </article> 

<article class="entry"> 
         <img src="images/books/6.jpg" alt="" title="" /> 
         <a href="#"> 
          <div class="text"> 
           <p class="head">LeMans</p> 
           <p class="title">LeMans</p> 
          </div> 
         </a> 
        </article> 

<article class="entry"> 
         <img src="images/books/7.jpg" alt="" title="" /> 
         <a href="#"> 
          <div class="text"> 
           <p class="head">LeMans</p> 
           <p class="title">LeMans</p> 
          </div> 
         </a> 
        </article> 

<article class="entry"> 
         <img src="images/books/8.jpg" alt="" title="" /> 
         <a href="#"> 
          <div class="text"> 
           <p class="head">LeMans</p> 
           <p class="title">LeMans</p> 
          </div> 
         </a> 
        </article> 

<article class="entry"> 
         <img src="images/books/9.jpg" alt="" title="" /> 
         <a href="#"> 
          <div class="text"> 
           <p class="head">LeMans</p> 
           <p class="title">LeMans</p> 
          </div> 
         </a> 
        </article> 

<article class="entry"> 
         <img src="images/books/10.jpg" alt="" title="" /> 
         <a href="#"> 
          <div class="text"> 
           <p class="head">LeMans</p> 
           <p class="title">LeMans</p> 
          </div> 
         </a> 
        </article> 

<article class="entry"> 
         <img src="images/books/11.jpg" alt="" title="" /> 
         <a href="#"> 
          <div class="text"> 
           <p class="head">LeMans</p> 
           <p class="title">LeMans</p> 
          </div> 
         </a> 
        </article> 

<article class="entry"> 
         <img src="images/books/12.jpg" alt="" title="" /> 
         <a href="#"> 
          <div class="text"> 
           <p class="head">LeMans</p> 
           <p class="title">LeMans</p> 
          </div> 
         </a> 
        </article> 

<article class="entry"> 
         <img src="images/books/13.jpg" alt="" title="" /> 
         <a href="#"> 
          <div class="text"> 
           <p class="head">LeMans</p> 
           <p class="title">LeMans</p> 
          </div> 
         </a> 
        </article> 

<div class="clear"></div> 

код CSS, как folowed: -

.books-container { 
     width: 1200px; 
     margin: 100px auto 0; 
    } 

    .entry { 
     width: 25%; 
     float: left; 
     height: auto; 
     padding: 10px; 
     position: relative; 
    } 

     .entry img { 
      width: 100%; 
      display: block; 
     } 

     .entry .text { 
      position: absolute; 
      display: none; 
      top: 0; 
      vertical-align: middle; 
      height: 100%; 
      background: red; 
      opacity: 0.5; 
      text-align: center; 
      width: 100%; 
      padding: 10px; 
     } 

Answer 1

http://jsfiddle.net/6deqxyk4/4/

.books-container {max-width: 1200px;width:100%; margin: 100px auto 0;} 
.entry {width:400px; float: left; height: auto; padding: 10px; position: relative;} 
.entry img {width: 100%; display: block;} 
.entry .text {position: absolute; display: none; top: 0; vertical-align: middle; height: 100%; background: red; opacity: 0.5; text-align: center; width: 100%; padding: 10px;}