✔ Browserübergreifendes Spaltenlayout (DIV)

[Tobias Menzel]

Hallo,

ich hoffe, ich habe bei der Suche keinen Beitrag übersehen, der das Thema behandelt (wenn ja, möge man mich steinigen ).

Folgendes: Ich möchte zwei DIV-Container horizontal nebeneinander ausrichten (wie zwei td-Tags in einer Tabelle). Die Container befinden sich in einem weiteren Container mit absoluter Position aber keiner Höhenangabe (die richtet sich nach der Größe des Inhaltes). Für Netscape/Mozilla gibt es die netten Eigenschaften display: table; display: table-row und display: table-cell;, aber der IE (6) mag sie immer noch nicht anzeigen. Es ist für mich kein Problem, für den IE mit PHP ein anderes Stylesheet einzubinden, aber wie bringe ich ihm diese Formatierung am besten bei? Versucht habe ich es mit position: relative; display: block und left: 50% (bzw. margin-left: 50%) -> die Container werden zwar nebeneinander, aber immernoch untereinander dargestellt. Tabellen möchte ich auf keinen Fall verwenden.

Danke und Gruß

P.S.: Zur Info: ich bin html 4.01 transitional valide, kann also relativ "schmutzig" arbeiten.
.

 

[Gumbo]

[…] die Container werden zwar nebeneinander, aber immernoch untereinander dargestellt.

Das verstehe ich nicht, werden sie nun nebeneinander oder untereinander dargestellt?

 

[Tobias Menzel]

Sowohl als auch, sprich: der zweite Container wird mit 50% left zwar rechts angezeigt, beginnt vertikal aber erst unterhalb des ersten Containers (sprich: einer oben links, der andere unten rechts)). So in etwa hatte ich es versucht:

<div id="left" style="position:relative; left:0%, width:45%;">Hier ein langer Text</div>
<div id="right" style="position:relative; left:50%; width:45%">Hier auch</div>

Möglicherweise habe ich nur eine Kleinigkeit übersehen.
So klappt es wunderbar im Mozilla:

<style type="text/css">
div.table {
	display:table;
	border-collapse:collapse;
}

div.tr {
	display:table-row;
	margin:10px;
}
div.td {
	display:table-cell;
	padding:10px;
}
</style>

<div class="table">
	<div class="tr">
 		<div id="left" class="td">
 		 		Text 1
		</div>
		<div if="right" class="td">
 		 		Text 2
		</div>
	</div>
</div>

Gruß
.

 

[Gumbo]

Versuch mal Folgendes:

#left {
	float:			left;
	width:			50%;
}
#right {
	margin-left:		50%;
}

 

[Tobias Menzel]

Super, geht! Bloß, dass das rechte DIV nun im IE nur halb so breit ist wie gewünscht (mit width:50%)... aber das bekomme ich hin - hab je eh zwei Stylesheets.

danke und Gruß
.