Hallo,

eigentlich sollte mein Vorhaben recht simpel sein, aber ich komme gerade nicht drauf.
Ich habe drei DIVs, die nebeneinander stehen. Wenn jetzt der Inhalt vom mittleren DIV zu groß wird, stehen die DIVs untereinander, wie auf dem Screenshot zu sehen.

Wie kann ich erreichen, dass sich die drei DIVs wie eine Tabellenzeile mit drei Spalten verhalten? Links das Bild, Mitte beliebig viel Text und rechts dann noch ein paar Einträge.

So sieht der Code derzeit aus:

HTML-Code:

			<div class="floatlef">
				<img src="images/avatar_dummy_user.png" width="40" height="40" />
			</div>
			<div class="floatleft">
				<%= msg.getMsg() %>
			</div>
			<div class="floatright">
				EINTRAG1<br />
				EINTRAG2<br />
				EINTRAG3<br />
			</div>

Danke schon mal für eure Hilfe!
Gruß
Gerrit

Hi,

im ersten DIV ist dir wohl beim Klassennamen ein Tippfehler unterlaufen.

Ansonsten liesse sich dein Vorhaben so umsetzen (beachte hierbei die Reihenfolge der drei DIV-Blöcke im HTML-Code):

HTML-Code:

<div class="floatleft">
     <img src="./images/avatar_dummy_user.png" width="40" height="40" />
</div>
<div class="floatright">
EINTRAG1<br />
EINTRAG2<br />
EINTRAG3<br />
</div>
<div class="content">
     content 
</div>

Code css:

1 2 3 4 5 6 7 8 9 10 11

.floatleft { float:left; width:40px; } .content { margin:0 150px 0 40px; } .floatright { float:right; width:150px; }

mfg Maik