css - trouble with layout/float:left -

i asked question 'trouble unwanted space between divs'

now have new problem…for layout, need multiply box 8 times this:

it worked before, (after erased height) this:

here's fiddle: http://jsfiddle.net/m5t6e/ , here's code:

html (repeats 8 times) :

<div class='image'></div> <div class='line1'></div> <div class='head'></div> <div class='subbox'>     <div class='sub'></div>     <div class='price'></div>     <div class='button'></div> </div> <div style='clear:both;'></div> <div class='line2'></div> <div class='placeholder'></div> 

css:

.headerimage {     background-color:#000;     height:273px;     left:0;     position:absolute;     right:0; } .box1 {     position:relative;     top:273px; } .produkt {     float:left;     height:318px;     position:relative;     width:224px; } .image {     background-color:#afeeee;     height:230px;     position:relative;     width:224px; } .line1 {     background-color:#000;     height:1px;     position:relative;     width:224px; } .head {     background-color:#eee;     height:25px;     position:relative;     width:224px; } .subbox {     height:50px;     position:relative;     width:224px; } .sub {     height:25px;     position:relative;     width:224px; } .price {     background-color:#847077;     float:left;     height:20px;     position:relative;     width:160px; } .button {     background-color:#6a5acd;     float:left;     height:20px;     position:relative;     width:58px; } .line2 {     background-color:#000;     height:5px;     padding-bottom:20px;     position:relative;     width:224px; } .placeholder{     height:800px;     width:800px;     position:relative;     padding-top:1000px; } 

1. remove .placehodler css style

2. encapsulate each element in div

3. set encapsulated div float:left , behave display:inline-block div

4. insert <br> after each 4 blocks

check jsfiddle