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

[Bernd]

ok, anscheinend muss man auch eine höhe angeben, jetzt werden die bilder auch innerhalb der div's angezeigt.

nur leider floaten sie noch nciht so wie sie sollen sondern erstrecken sich über die gesamte seite. wo ist hier der fehler?

[MudGuard]

Hi,

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.

div.box img
{
border:1px solid #C69;
margin:4px;
float:left;

mit dem float nimmst Du die Bilder aus dem Elternelement raus.

Warum willst Du die Bilder floaten lassen?
Bilder sind inline-Elemente - die liegen auch ohne float nebeneinander.

cu,
Andreas