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

07/14/2013 21:31 Fonsi<3#1

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.

[Only registered and activated users can see links. Click Here To Register...]

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:

Code:

<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:

Code:

#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. :)

07/14/2013 21:50 Evolutio#2

mit jQurey Arbeiten.

sollte dann in etwa so aussehen:

Code:

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

07/14/2013 21:53 Fonsi<3#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 ;(

07/14/2013 23:04 MrPuschel#4

Du wirst um das tricksen nicht herumkommen. Ein Artikel der dir das Prinzip sehr gut erkl�rt findest du hier: [Only registered and activated users can see links. Click Here To Register...]

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: [Only registered and activated users can see links. Click Here To Register...] Ich w�rde dir aber den ersten Trick empfehlen.

07/15/2013 00:24 Fonsi<3#5

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

07/18/2013 16:35 NEXON | Technologies#6

Sry das geht ohne JQery nicht!

07/18/2013 17:04 MrPuschel#7

Quote:

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.