Hallo liebe Leser,
ich sitze seit Stunden an einem einem eigentl. sehr banalen Problem
und finde dennoch keine Lösung.
Ich habe folgenden HTML-Quelltext:
#############
<div class="vorschau">
<a href=""><img src="a.jpg" width="130" height="106"></a>
<p>
Hier irgendein Text. Der kann kurz oder lang sein.
</p>
</div>
#############
So soll es später aussehen:
Ein Rechteck (das außere DIV),
mit rechts, links und unten 2px Rand.
Darin linksbündig ein Bild (Breite 130px, Höhe kann variieren)
Neben dem Bild rechts ein Text, er soll das Bild
nicht umfließen falls er länger als das Bild wird.
Das Problem ist, dass wenn der Text niedriger als das Bild ist,
das DIV auch kleiner wird. Das Bild dehnt quasi das DIV nicht aus,
d.h. die untere Outline sitzt viel zu hoch (unterhalb der letzten
Textzeile)
Mein Css sieht bisher so aus:
#############
div.vorschau{
margin:0;
padding:0 0 5px 0;
border-left: 2px solid #333399;
border-right: 2px solid #333399;
border-bottom: 2px solid #333399;
}
div.vorschau img{
float: left;
border: 1px solid #333333;
}
div.vorschau p{
display: block;
margin:0 0 0 140px;
font-size: 12px;
}
#############
Ich würde mich echt freuen, wenn mir jemand auf die Sprünge
helfen könnte, ich hab' echt schon alles probiert...
Viele Grüße,
Benjamin Keil