css - CSS3 inline-Block doesn't work on fluid floating divs -

i try fluid elements after line break in row vertical-align: top , display inline-block. doesn't work. different height of elements shoot the layout after line break.

here sample fiddle

stylesheet:

    section {          display: block;         max-width: 720px;     }      img {         display: block;         width: 100%;         height: auto;     }      .container {         width: 100%;     }      .container:after {         content: "";         display: table;         clear: both;     }      .col {         float: left !important;         margin-right: 3.3333333333333335%;     }      .t4 {             width: 31.11111111111111%;     }      .t4:nth-child(3n) {         margin-right: 0;     }      .p-item {         display: inline-block;         vertical-align: top;     } 

html5

<section class="content">     <div class="container inside">         <div class="col t4 p-item">             <img src="http://placehold.it/225x300/01da90/fffedb" />                 <p>brandname<br />this such very long productname can't believe! such very long productname can't believe!<br />99.00 eur</p>         </div>         <div class="col t4 p-item">             <img src="http://placehold.it/225x300/01da90/fffedb" />                 <p>brandname<br />this such very long productname can't believe!<br />99.00 eur</p>         </div>         <div class="col t4 p-item">             <img src="http://placehold.it/225x300/01da90/fffedb" />                 <p>brandname<br />this such productname can't believe!<br />99.00 eur</p>         </div>         <div class="col t4 p-item">             <img src="http://placehold.it/225x300/01da90/fffedb" />                 <p>brandname<br />this such very long productname can't believe! such very long productname can't believe!<br />99.00 eur</p>         </div>         <div class="col t4 p-item">             <img src="http://placehold.it/225x300/01da90/fffedb" />                 <p>brandname<br />this such very long productname can't believe! such very long productname can't believe!<br />99.00 eur</p>         </div>         <div class="col t4 p-item">             <img src="http://placehold.it/225x300/01da90/fffedb" />                 <p>brandname<br />this such very long productname can't believe!<br />99.00 eur</p>         </div>         <div class="col t4 p-item">             <img src="http://placehold.it/225x300/01da90/fffedb" />                 <p>brandname<br />this such productname can't believe!<br />99.00 eur</p>         </div>         <div class="col t4 p-item">             <img src="http://placehold.it/225x300/01da90/fffedb" />                 <p>brandname<br />this such very long productname can't believe! such very long productname can't believe!<br />99.00 eur</p>         </div>         <div class="col t4 p-item">             <img src="http://placehold.it/225x300/01da90/fffedb" />                 <p>brandname<br />this such very long productname can't believe! such very long productname can't believe!<br />99.00 eur</p>         </div>         <div class="col t4 p-item">             <img src="http://placehold.it/225x300/01da90/fffedb" />                 <p>brandname<br />this such very long productname can't believe!<br />99.00 eur</p>         </div>         <div class="col t4 p-item">             <img src="http://placehold.it/225x300/01da90/fffedb" />                 <p>brandname<br />this such productname can't believe!<br />99.00 eur</p>         </div>     </div> </section> 

float force block display on elements, that's why don't keep line. remove float , set parent's font size 0 (to avoid space between inline blocks).

.inside {     font-size: 0; }  .col {     float: none !important;     font-size: 16px; } 

http://jsfiddle.net/3ef8g/1/