problemen met float en position

[bionic]

Kan iemand mij helpen?

Ik ben bezig met het maken van een site met catalogus, maar ik krijg de producten niet zo gepositioneerd, zonder dat deel van mijn opmaak er onder lijdt. Ik maak gebruik van ronde hoeken, die nu niet meer naar de juiste plaats willen gaan.

HTML

<div class="box">

<div class="top">

<img src="../img/tl.gif" class="corner">

</div>

<div class="boxsize">

<h2>Catalog</h2>

<p>

<div class="cat">

<a href="">

<img src="../img/cat/anom.gif"><br />

Anomaly<br />

</a>

$35,00

</div>

<div class="cat">

<a href="">

<img src="../img/cat/anom.gif"><br />

Anomaly<br />

</a>

$35,00

</div>

<div class="cat">

<a href="">

<img src="../img/cat/anom.gif"><br />

Anomaly<br />

</a>

$35,00

</div>

<div class="cat">

<a href="">

<img src="../img/cat/anom.gif"><br />

Anomaly<br />

</a>

$35,00

</div>

<div class="cat">

<a href="">

<img src="../img/cat/anom.gif"><br />

Anomaly<br />

</a>

$35,00

</div>

<div class="cat">

<a href="">

<img src="../img/cat/anom.gif"><br />

Anomaly<br />

</a>

$35,00

</div>

</p>

</div>

<div class="bottom">

<img src="../img/bl.gif" class="corner" />

</div>

</div>

CSS

.boxsize img {float:left;

margin:6px;

}

.box { width: 700px;

position:relative;

float:right;

left:0;

top:0px;

background-color: #fff;

color: #000;

margin-right:12px;

margin-left:6px;

margin-top:12px;

margin-bottom:12px;

text-align:left;

}

.boxsize {min-height:180px;

padding:12px;

}

.cat {text-align:center;

display:block;

position:relative;

float:left;

width:31%;

border:solid #333;

margin:3px;

}

.cat img {height:auto;

width:90%;

}

.top p { margin: 0 10px;position:relative;}

.top { background:url(../img/tr.gif) no-repeat top right;position:relative; }

.bottom { background: url(../img/br.gif) no-repeat bottom right; position:relative; }

img.corner { width: 12px; height: 12px; border: none; display: block;position:relative;}

[ecence]

-------

20 december 2011 aangepast door ecence