Div's nebeneinander platzieren

Reyx

Hallo,

ich habe ein zwei div-Boxen, welche ich nebeneinander positionieren möchten. Um diese beiden Boxen herum ist eine weitere.

Nun habe ich die linke der beiden inneren Boxen mit "float: left;" entsprechend eingerichtet, dass die zweite der inneren Boxen rechts davon verläuft. Mein Problem ist aber nun, dass die äußere Box sich wegen dem "float: left;" in ihrer Höhe nicht mehr an der Größe der linken inneren Box orientiert. Soll heißen: Wenn die rechte innere Box größer ist als die linke, dann ist alles gut. Ist sie aber kleiner, so läuft die linke innere Box aus der äußeren Box heraus.

Wie kann ich der äußeren Box klar machen, dass sie sich in jedem Fall auf die benötigte Höhe ausdehnt? Ich habe es overflow versucht, aber da bekam ich in Opera, Firefox und IE ziemlich unterschiedliche Ergebnisse. Es sollte schon so sein, dass es in diesen drei Browsern funktioniert.

Im Prinzip will ich nur das gleiche haben, wie ich bei zwei nebeneinanderliegenden Tabellenzeilen hätte ...

So sieht es aus:
 _______________________
| _________  __________ |
||         ||          ||
||         ||          ||
||         ||__________||
||_________|____________|
 |         |            
 |_________|            

Aber so soll es aussehen:
 _______________________
| _________  __________ |
||         ||          ||
||         ||          ||
||         ||__________||
||         |            |
||         |            |
||_________|            |
|_______________________|

SideWinder

Gibt sicher bessere Lösungen, aber ich werfe nach den beiden Inner-DIVs noch ein drittes Inner-DIV rein:

<div style="padding: 1em; border: 1px solid black">

	<div style="width: 50%; float: left; padding: 1em; border: 1px solid blue">
	Left<br />
	Left<br />
	Left<br />
	</div>

	<div style="margin-left: 50%; padding: 1em; border: 1px solid green">
	Right<br />
	Right<br />
	</div>

	<div style="clear:both">
	</div>

</div>

MfG SideWinder

Reyx

Vielen Dank, klappt wunderbar

in dem zusammenhang:

wie geht denn folgendes (falls es denn überhaupt geht )

+---------------------+
|  +-------+ +-----+  |
|  |ganz   | |kurz |  |
|  |langer | +-----+  |
|  |text   |          |
|  +-------+          |
+---------------------+

ich möchte, dass das rechte div die gesamte höhe ausnutzt. also height:100%. aber das geht natürlich nicht, wäre ja zu einfach, zu intuitiv :).

der äußere kasten ist ein div, nicht body. von html,body{height:100%} hab ich schon gelesen, das hilft in dem fall aber nicht. wenn ich das setze, und bei dem umschließenden div auch height:100% mache, funzt es fast. sobald das browserfenster jedoch zu klein ist, ist das rechte div nur so groß wie das fenster und hört dann auf :(.

ich hoffe ihr könnt mir auf die sprünge helfen, ich krieg es ums verrecken nicht hin, seit tagen frickel ich mir einen zurecht, ohne das was klappt.

gruß, mata

geht es wirklich nur so: http://www.alistapart.com/articles/fauxcolumns/ ? die idee kam mir natürlich auch schon, aber ich dachte halt das müsste css nun besser können. hätte ich nun wirklich erwartet. ich bin nun beim besten willen kein verfechter von tabellen, aber sowas müsste nun wirklich ohne hintergrundbild gehen :(.

Neku

Einer der Gründe, warum ich Tabellen den DIVs immernoch vorziehe.

ist laut selfhtml nicht moeglich
siehe hier:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig

Anhand des Beispiels sehen Sie auch, dass sich Boxen nicht gegenseitig in ihrer Höhe beeinflussen. Dies muss kein Nachteil sein, sondern kann bewusst zur Gestaltung der Seite eingesetzt werden, erfordert allerdings ein Umdenken und die Abkehr vom althergebrachten "Spaltendenken" bei Tabellen-Layouts.

mfg aman..