Css - Formatierung eines DIVs

[Benjamin Keil]

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

[Thomas J.]

Tag

<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>

<p style="clear:left"> </p>

Das ist zwar nicht die eleganteste Art, erfüllt aber seinen Zweck.

</div>

Falls Du mit dieser Konstruktion einen unerwünschten Abstand zum unteren Rand des div bekommst, muß Du den zweiten Absatz je nach Bedarf noch mit margin, padding, font-size und line-height anpassen.

Thomas J.

[Benjamin Keil]

Hallo

<p style="clear:left"> </p>

Das ist zwar nicht die eleganteste Art, erfüllt aber seinen Zweck.

Naja, funktionieren tut es ja, allerings ist das dann
leider meine sozusagen erste 'sinnlose' Angabe in einem
sehr großen Projekt.

Ich habe es vorher mit display:table; für das
umschließende DIV versucht, IE mag das nicht, Mozilla
schon. Wäre das denn eine valide und sinnvolle
Lösung (abgesehen vom IE, der bekommt eh ein zusätzliches css)?

Falls Du mit dieser Konstruktion einen unerwünschten Abstand zum unteren Rand des div bekommst, muß Du den zweiten Absatz je nach Bedarf noch mit margin, padding, font-size und line-height anpassen.

Das ist kein Problem.

Vielen Dank,

Ben

[Thomas J.]

Ich habe es vorher mit display:table; für das
umschließende DIV versucht, IE mag das nicht, Mozilla
schon. Wäre das denn eine valide und sinnvolle
Lösung (abgesehen vom IE, der bekommt eh ein zusätzliches css)?

Ja, auf jeden Fall.
Du kannst auch den Verweis nebst Bild in einen Absatz packen und p {display:table-cell; vertical-align:top; etc...} schreiben.

Also
<p>
 <a href="#"><img src="dateiname.gif" width="..." height="..." border="0" alt="Alternativtext"></a>
</p>
<p>
 Der Text steht daneben.
</p>

Das hätte z.B. den Vorteil, daß Du flexibler bist, wenn das Bild nun mal nicht 130px breit ist.

Thomas J.