3Spaltenlayout: Höhe immer gleich

[keinBlase]

Hallo Zusammen

Ich habe ein 3 spaltriges HTML Layout mit CSS. Nun habe ich das Problem, dass je nach Seite der Inhalt der 3 Spalten nicht gleich hoch ist. Jede Möglichkeit ist denkbar, d.h. einmal ist die linke, einmal die rechte und einmal die zentrale Spalte am höchsten.

Wie krieg ich es nun per CSS (ausschliesslich CSS) hin, dass immer alle Spalten die selbe Höhe haben?

Ich habe es schon mit diversen im Web beschriebenen Varianten versucht. Jedoch geht es immer in einem Browser nicht (meistens im IE6 oder IE7)

Mein Layout:

<div id="content">
    <div id="left">left
    </div>
    <div id="right">right
    </div>
    <div id="center">
       center
    </div>
</div>

[suit]

Ich habe es schon mit diversen im Web beschriebenen Varianten versucht.

https://forum.selfhtml.org/?t=191081&m=1274004

[KeinBlase]

Ja ich weiss, konnte aber niemand helfen.

Habs nun raus, ist ne Kombination:

HTML:

<div id="content">  
    <div id="left">left</div>  
    <div id="right">right</div>  
    <div id="center">center</div>  
    <div class="clr"></div>  
</div>

CSS:

#content{  
	width:100%;  
	height: 100%;  
	display:block;  
}  
.clr { clear: both; }  
  
#left{  
	float:left;  
	display:block;  
	width: 180px;  
	height: 100%;  
	padding:0px 0px 0px 0px;  
	margin: 0px 0px 0px 0px;  
	background-color:#66F;  
}  
#center{  
	display:block;  
	float:left;  
	width: 578px;  
	height: 100%;  
	margin-left:6px;  
	padding-left:10px;  
	padding-right:10px;  
	background-color:#6CF;  
}  
  
#right{  
	float:right;  
	display:block;  
	width: 180px;  
	height: 100%;  
	padding:0px 0px 0px 0px;  
	margin: 0px 0px 0px 0px;  
	background-color:#F90;  
  
}  
#left, #center, #right{  
	padding-bottom: 1000em;  
	margin-bottom: -995.5em;  
  
}

Der Trick ist die Verwendung von
padding-bottom: 1000em;
margin-bottom: -995.5em;
sowie die Verwendung eines Float Divs am Ende.

Gruss

[suit]

Ja ich weiss, konnte aber niemand helfen.

Ja, dir scheinbar auch nicht, weil dir ggf. der ala-Artikel zu lange ist obwohl er in der Tat die vernünftige Lösung für diesen Anwendungsfall zeigt.

Habs nun raus, ist ne Kombination:
Der Trick ist die Verwendung von
padding-bottom: 1000em;
margin-bottom: -995.5em;
sowie die Verwendung eines Float Divs am Ende.

Das ist Unsinn und etwas "unpraktisch" in der handhabung - warum wirst du spätestens merken, wenn du echte Inhalt einfügst.

[krischi]

moinmoin

Ich habe es schon mit diversen im Web beschriebenen Varianten versucht. Jedoch geht es immer in einem Browser nicht (meistens im IE6 oder IE7)

du kennst Stu Nicholls nicht?

Gruß Krischi

[suit]

du kennst Stu Nicholls nicht?

Wenn alle drei Spalten ein gemeinsames Elternelement haben schlägt diese Technik fehl.

[krischi]

moinmoin

Wenn alle drei Spalten ein gemeinsames Elternelement haben schlägt diese Technik fehl.

tatsächlich?

Ich hab beide Varianten schon ausgetestet und da es das gewünschte Ergebnis liefert, hab ich mir darüber keine Gedanken gemacht.

Gruß Krischi

[suit]

Ich hab beide Varianten schon ausgetestet und da es das gewünschte Ergebnis liefert, hab ich mir darüber keine Gedanken gemacht.

Die Andere variante funktioniert aber anders als die Eingangs erwähnte.

Dennoch bleibt hier das Problem, dass man kein Hintergrundbild verwenden kann, da die Spaltenhintergründe durch die Rahmen der mittleren Spalte erzeugt werden.

Wenn man dies hingegen abändert ist man wieder bei der gebräuchlichen faux-columns-Variante.

[krischi]

moinmoin suit,

sorry für die späte Antwort, ich wollte des erst zu Hause durchspielen.

Dennoch bleibt hier das Problem, dass man kein Hintergrundbild verwenden kann, da die Spaltenhintergründe durch die Rahmen der mittleren Spalte erzeugt werden.

jupp, korrekt. Da ich nicht in der Verlegenheit war, Hintergrundbilder zu verwenden, war mir das gar nicht aufgefallen / bewusst geworden.

Was du so alles siehst... *Hut zieh*

Gruß Krischi

[suit]

Was du so alles siehst... *Hut zieh*

Ich bin wie Cypher aus "The Matrix": ich kann CSS- und HTML-Code durch ansehen im Gehirn parsen :p

"Ich seh den Code gar nicht mehr, ich seh nur noch Blonde, Brünette, Rothaarige."