✔ Text um Bild?

[Suchfunktion]

Hi.

Ich moechte einen Text rechts neben (und entsprechend auch unter) einem Bild haben.

Mein HTML:

<div class="foo" style="border:1px solid #000000">
  <a href="foobar.html">
    <img src="bar.jpg">
  </a>
  <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer sodales congue ante. Vestibulum felis. Phasellus nunc urna, gravida in, egestas quis, vehicula nec, quam.</p>
</div>

Ich habe bereits folgendes versucht:

.foo img{
  float:left;
}

Theoretisch funktioniert das auch, aber praktisch nicht so ganz wie es soll.
Wenn der Textbereich flacher ist als die Grafik, dann sitzt die grafik ueber dem Bottom-Border des umschliessenden DIV-Bereichs.

Kurzgesagt:
Der DIV-Bereich ist immer so hoch wie der Text, unabhaengig von der Bildhoehe.


Wie kann ich es jetzt per CSS loesen, dass der DIV-Bereich immer so hoch ist wie das Bild, bzw. wie der Text? (Sich als dem "hoechsten" Inhalt anpasst. Text- und Bildgroesse sind variable.)
Bzw.: wie kann ich die Grafik links neben den Text setzen ohne ein float zu verwenden?

mfg
Suchfunktion

 

[Maik]

Notiere nach dem Textabsatz ein Blockelement, z.B. DIV, mit der clear:left-Eigenschaft, um wieder den normalen Textfluss im Dokument herzustellen - dann richtet sich die Höhe des umgebenden DIVs auch nach dem höchsten Kindelement aus.

.foo img {
float: left;
}

.foo p {
margin: 0;
padding: 0;
}

.clear {
clear: left;
font-size: 1px;
line-height: 0;
}

<div class="foo" style="border:1px solid #000000">
     <a href="foobar.html"><img src="bar.jpg"></a>
     <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer sodales congue ante. Vestibulum felis. Phasellus nunc urna, gravida in, egestas quis, vehicula nec, quam.</p>
     <div class="clear">&nbsp;</div>
</div>

 

[Suchfunktion]

Hi.

Danke
Klappt gut..