div vs. table

Hi,

ich stehe vor einem Problem: Ich möchte meiner Site endlich die Tabellen abgewöhnen, die ich für das Design benutzt habe und auf div+css umsteigen.

Jetzt stellt sich mir aber folgendes Problem:

So sieht es aus:
 _______________________
| _________  __________ | 
|| Ein     ||  Kurzer  || 
||  Langer ||   Text   || 
||  Text   ||__________|| 
|| Kommt   |            | 
||   Vor   |            | 
||_________|            | 
|_______________________|

So soll es aussehen:

 _______________________
| _________  __________ | 
|| Ein     ||  Kurzer  || 
||  Langer ||   Text   || 
||  Text   ||          || 
|| Kommt   ||          || 
||   Vor   ||          || 
||_________||__________|| 
|_______________________|

Bestes Beispiel: Forum. Variable Größe (Breite Höhe für alle "Zellen") und unterschiedlich viel Inhalt.

Ich bekomm aber nur Status 1 hin, möchte es aber so wie in Status 2 haben. Hab gelesen das dies in CSS nicht möglich ist und nur mit einem Grafiktrick funktionieren würde - was eigentlich sehr schade währe..

Geht das irgendwie codemäßig? Oder sollte man in diesem Punkt bei Tabellen bleiben wie es z. B. in Foren der Fall ist?

aMan

geht wirklich nicht..

http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig
(siehe erleuterung)

Ach man, das ist doch doof.

Bleib ich habt bei tabellen.

hehejo

Warum sollte das nicht gehen?
Du kannst den divs doch eine feste height und overflow=auto; geben.

@hehejo: mach das doch mal vor

Neku

hehejo schrieb:

Warum sollte das nicht gehen?
Du kannst den divs doch eine feste height und overflow=auto; geben.

"feste height" und "variable größe" sind doch bereits ein Widerspruch, oder findest du nicht?

gibt so tricks mit background und dann repeat-y aber alles gemurkse

also so wie sich das anhört schreit es nur nach php oder einer anderen scriptsprache um seiten dynamisch zu gestalten. auch DHTML wäre eine Sache die man sich anschauen könnte.
Ich weiß nicht von was du die div größe abhängig machst aber du brauchst ja nur größe a und b und diese dann mit php vergleichen. ist a größer als b dann nimmt b den wert von a an und umgekehrt.
so in die richtung sollte es gehen... nur mit reinem html wirst du es nicht dynamisch bekommen. deshalb gibt es ja sprachen wie php und auch DHTML steht ja für dynamisches html...

Trunxx

Oft macht es vom Layout her keinen Unterschied, ob nun beide Spalten gleich lang sind oder nicht.
Wenn doch gibt es nur die Notlösung mittels Faux Columns.

mantiz

Ich weiß zwar nicht, ob das Problem noch aktuell ist, aber ich bin gerade auf den Beitrag gestossen (ich schau nicht so oft in dieses Forum) und hatte mir die Frage auch schon des öfteren gestellt. Ich habe dann jetzt mal eine Schnell-Lösung geschrieben. Bisher werden Rahmen-Größen nicht unterstützt, deswegen resize ich beide Spalten, aber wenn jmd. Lust hat, dann könnte er es ja entsprechend anpassen.

Hier mein Test-Code:

<html>
	<head>
		<title>CSS: Spalten-Layout (gleiche Höhe) - Test</title>

		<style>
			#frame   { padding: 2px; background: #CCC; border: 1px solid #000; }
			#left    { float: left;  width: 100px; padding: 2px; background: #AAA; border: 1px solid #000; }
			#right   { float: right; width: 100px; padding: 2px; background: #EEE; border: 1px solid #000; }
			#spanner { height: 1px; visibility: hidden; clear: both; }
		</style>

		<script language="javascript">

			function arrange(id1, id2) {
				el1 = document.getElementById(id1);
				el2 = document.getElementById(id2);
				if (el1.offsetHeight > el2.offsetHeight) {
					el2.style.height = el1.offsetHeight;
					el1.style.height = el1.offsetHeight;
				}
				else {
					el1.style.height = el2.offsetHeight;
					el2.style.height = el2.offsetHeight;
				}
			}

		</script>

	</head>

	<body onLoad="arrange('left', 'right');">

		<div id="frame">

			<div id="left">
				<h3>left</h3>
				Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
			</div>

			<div id="right">
				<h3>right</h3>
				Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
				Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
			</div>

			<div id="spanner"></div>

		</div>

	</body>

</html>