HTML/CSS - Faux Columns - Benötige Hilfe :)

[Fonsi<3]

Halli, Hallo liebes Forum.
Ich schreibe derzeit ein Template und hatte bisher viele Fehler die ich aber erfolgreich beheben konnte.
Nur jetzt stehe ich vor ein Problem was ich einfach nicht gelöst bekomme. Ich habe schon herausgefunden das es was mit den faux Columns zu tun hat, doch leider bekomme ich es einfach nicht hin.



Unzwar soll der linke Container sich immer den rechten anpassen von der höhe. Denn wenn der linke Container größer ist, sieht man ja was raus kommt. Und da im linke Container der Main Content rein kommt, muss ich da eine Lösung finde da der immer am größten sein wird.

HTML Quelltext:

<div id="main"><div id="platzhalter"></div><div id="content_head">      STARTSEITE    </div><div id="platzhalter"></div>   <div id="content"><div id="content_wrapper_left"><span style="color: darkred; font-weight: bold;">Links</span><br /><br /> </div><div id="content_wrapper_right"><span style="color: darkred; font-weight: bold;">Rechts</span></div><div id="platzhalter"></div></div></div>

CSS-Quelltext:

#main {  margin-left: auto;  margin-right: auto;  text-align: left;  margin-top: 12px;  border: 2px solid #000000;  width: 1085px;  margin-top: 95px;}
#content {  text-align: left;}
#content_wrapper_left {  width: 65%;  background: #dadada;  padding: 8px;  float: left;}
#content_wrapper_right {  background: #dadada;  padding: 8px;}
#platzhalter {  height: 3px;  background: #454545;}

Wenn mir das jemand erklären könnte oder direkt beheben kann, denn würde ich sehr dankbar sein.

[Evolutio]

mit jQurey Arbeiten.

sollte dann in etwa so aussehen:

var height = $("#content_wrapper_left").height();
$("#content_wrapper_right").css("height", height);

[Fonsi<3]

Ok gute Idee. Wollte aber versuchen soweit es gehend bei CSS zu bleiben. Ich weiß ja auch schon das dass mit dem Faux Coulmns zu tun hat. Nur ich kriege es irgendwie nicht eingebaut ;(

[MrPuschel]

Du wirst um das tricksen nicht herumkommen. Ein Artikel der dir das Prinzip sehr gut erklärt findest du hier:

Eine andere etwas schmutzigere Möglichkeit ist natürlich die beiden Container auf position:absolute zu setzen und ihnen für bottom den Wert -1000px zuzuweisen. Overflow muss dann für den parent container auf hidden gesetzt werden. Eventuell musst du für cross-browser Kompatiblität mit table-cell arbeiten. Ein ähnliches Prinzip findest du hier: Ich würde dir aber den ersten Trick empfehlen.

[Fonsi<3]

Super, danke!
Habe mir alles zusammen gebastelt und funktioniert einwandfrei.

[NEXON | Technologies]

Sry das geht ohne JQery nicht!

[MrPuschel]

Originally Posted by NEXON | Technologies

Sry das geht ohne JQery nicht!

Ich denke einmal täglich die Threads durchzugehen und sinnbefreite Antworten zu posten um per Signatur Werbung zu machen wird dir weder etwas einbringen noch dazu führen das du den Account sonderlich lang behälst.