Innerhalb eines DIVs eine Liste mit Float...

[General Hammond]

Hallo liebes TP,

ich möchte eine Liste erstellen bei der Links ein Bild ist rechts daneben Text mit einer Überschrift.

Der Text soll aber am unteren Rand des Bildes ausgerichtet sein.
Denn wenn der Text oben ausgerichtet ist und der Text in der Höhe kürzer als das Bild, dann ragt das Bild in das nächste Element.

Im Grunde genommen benötige ich das so wie eine Tabelle mit 2 Spalten.
Und von Listeneintrag zu Listeneintrag soll ein Abstand sein.

Ich habe mal eine Grafik angehängt die verdeutlichen soll was ich meine.

Es wäre toll wenn jemand ein funktionierendes Beispiel hätte

[Boris]

Denn wenn der Text oben ausgerichtet ist und der Text in der Höhe kürzer als das Bild, dann ragt das Bild in das nächste Element.

Dann musst du dem Bild einfach nur ein clear: left; zuweisen und fertig

[General Hammond]

Danke für Deine Antwort Boris.
Leider hat das nicht funktioniert da ich dem Bild ja schon ein float:left verpasst habe.
Ich habe es nun hinbekommen, weiß allerdings nicht ob das optimal ist.
Hier der Code:

PHP-Code:

<img src="bild.jpg" alt="" width="100" height="75" style="background-color: #66CCCC" class="referenz" />
<h1 class="referenz">Überschrift</h1>
<p class="referenz">Beschreibender Text. Link zu einer Seite: <a href="#">www.traum-projekt.com</a></p>
<div class="leer"></div>
<img src="bild.jpg" alt="" width="100" height="75" style="background-color: #66CCCC" class="referenz" />
<h1 class="referenz">Überschrift</h1>
<p class="referenz">Beschreibender Text. Link zu einer Seite: <a href="#">www.traum-projekt.com</a></p>
<div class="leer"></div></div> 


h1.referenz {
	color: #66A743;
	font-size: 1.2em;
	margin-top: 37px;
}
p.referenz {
	color: #666666;
}
img.referenz {
	margin: 10px 10px 0 0;
	float: left;
}
.leer {
	clear: both;
	font-size: 8px;
}

[Boris]

Man kann Elemente, die man floatet, auch ohne Probleme ein clear zuweisen. Gib dem Bild dann halt das clear: both;

[General Hammond]

Jetzt hab ichs kapiert - clera:both und nicht clear:left
Nochmals vielen Dank - Boris.

Gibt es nun noch eine Möglichkeit den Text neben dem Bild am unteren Bildrand auszurichten.
Denn ich gehe mal davon aus - das nicht jeder Browser auf jedem System die Schrifthöhe und die Zeilenabstände Tupfengleich darstellt.
Somit wird mit meiner jetzigen Lösung immer ein anderer Abstand vom oberen Rand gegeben sein

Vielen Dank!

[Boris]

Denn ich gehe mal davon aus - das nicht jeder Browser auf jedem System die Schrifthöhe und die Zeilenabstände Tupfengleich darstellt.

Doch, das geht schon. Du musst halt für margin und padding deinen gewünschten Wert angeben, sonst werden die Standardabstände der Elemente genutzt, welche dann bei jedem Browser ein wenig anders sind.

[General Hammond]

Das klingt gut leuchtet auch ein - gibt es aber trotzdem eine Möglichkeit den Text unten auszurichten?

Denn sonst muß der Text ja immer gleich lang sein, darf also keine weitere Zeile erzeugen und das ist recht schwierig umzusetzen.

[Boris]

gibt es aber trotzdem eine Möglichkeit den Text unten auszurichten?

Nein

[General Hammond]

Zitat von Boris

Nein

Danke

[Gubino]

ich will im prinzip genau das gleiche, nur das bild rechts. das bild wird aber immer drunter gesetzt und erscheint nicht auf gleicher höhe. hab schon bei diversen anderen foren und threads geguckt aber irgendwie wills nicht. hier mal der code

 <div class="text">

<p class="Stil3">TEXT<img src="grafiken/montage.jpg" align="right"></p>  

</div>

css

.Stil3 {font-size: 18px;}

.text {float: left; margin-top: 20px; padding: 0px;}
.text img {float: left; clear: both; padding: 20px; margin: 0px;}