bilder werden ausserhalb von div angezeigt

[Bernd]

hi, ich habe css container (div) in denen eine h2 und darunter ein paar bilder angezeigt werden soll. leider werden die bilder ausserhalb vom div angezeigt.

hier mein css:
---

div.boxwrap
{
float:left;
}
div.box
{
border:1px solid #C69;
padding:3px;
text-align:center;
}
div.box img
{
border:1px solid #C69;
margin:4px;
float:left;
}
div.box a {
float:right;
}
h2
{
font-size:14px;
height:20px;
width:225px;
padding:3px;
margin:0 0 -5px 0;
font-weight:bold;
color:#fff;
background-image:url(images/boxhead.gif);
background-repeat:no-repeat;
}
br
{
clear:left;
}

---

und hier das dazugehörige html:

---

<div class="boxwrap">
   <h2>Top-bilder</h2>
  <div class="box">
  <img src="images/preview.jpg" width="100" height="100">
  <img src="images/preview.jpg" width="100" height="100">
  <img src="images/preview.jpg" width="100" height="100">
  <img src="images/preview.jpg" width="100" height="100">
  <img src="images/preview.jpg" width="100" height="100">
  <a href="#">Alle bilder anzeigen...</a>
  </div>
</div>
<br><br>
<div class="boxwrap">
   <h2>Top-Videos</h2>
  <div class="box">
  <img src="images/preview.jpg" width="100" height="100">
  <img src="images/preview.jpg" width="100" height="100">
  <a href="#">Alle Videos anzeigen...</a>
  </div>
</div>
<br><br>
<div class="boxwrap">
   <h2>Top-Games</h2>
  <div class="box">
  <img src="images/preview.jpg" width="100" height="100">
  <img src="images/preview.jpg" width="100" height="100">
  <a href="#">Alle Games anzeigen...</a>
  </div>
</div>

---

kann mir jeamd sagen wo hier der fehler ist?

danke und gruß
Bernd