[CSS] 3SpaltenLayout verschiebt sich immer :( *erledigt*

[Nighthawk]

Hallo,

habe bei dieser Seite: www.alte-fegler.de das Problem, dass sich das 3 SpaltenLayout bei kleinerer Auflösung immer verschiebt


das 3 Spalten Layout sieht dann immer folgendermaßen aus:



d.h. die linke spalte geht nach oben und die rechte spalte wird dafür größer...


meine css-datei sieht folgendermaßen aus (relevante teile):

html {
	height: auto;
}

body {
	margin:0%;
	padding:0%;
 	font-family:Verdana, Arial, sans-serif;
 	font-size:12px;
 	background-color:#E8E7E7;
 	color:#000000;
	height: auto;
}

#content {
	border-right: 1px solid #000000;
	border-left: 1px solid #000000;
	background-color: #FFFFFF;
	margin: 0px 10% 0px 10%;
	padding: 0px;
	height: 100%;
}
#left {
	width: 100px;
	padding: 10px;
	float: left;
        padding: 0px 0px 10px 10px;
        margin-right:10px;
	max-height:100%;
}

#center {
        padding: 0px 10px 10px 10px;
	width: 68%;
        float: left;
        height: 100%;
	border-right: 1px solid #6CA70E;
	border-left: 1px solid #6CA70E;
}

#right {
	width: 125px;
        padding: 20px 20px 10px 10px;
	float: right;
	max-height:100%;
}

weiß jemand woran das liegt? sonst muss ich da wieder ne tabelle einbauen... :/

Danke schonmal

Gruß
Nighty

 

[FredRedHead]

meinst du, wenn ich das browserfenster kleiner mache?

 

[burnred]

Das liegt daran das den Browser das height: 100% nicht interressiert.
Der Linke Teil ist nur so hoch wie sein Inhalt und deswegen pappt der den Mittleren unten dran. Wenn du eine feste höhe ala 400px eingibts solltes das wesentlich später passieren.

 

[Nighthawk]

meinst du, wenn ich das browserfenster kleiner mache?

ja genau, bei ner kleineren auflösung ist das sofort der fall...


@burnred: ich werds mal versuchen, aber ich glaub eigentlich nicht, dass es daran liegen könnte...

 

[Nighthawk]

Also das mit der Höhe funzt nicht...

kommt mir das nur so vor oder ist so ein Layout mit CSS einfach nur doof umzusetzten? Wenn ich das Fenster kleiner mache schieben sich die Blöcke hin und her wie sie grade Lust haben...


ist hier jemand der Ahnung davon hat, wie ich das ändern muss?

 

[burnred]

andere Möglichkeit wäre noch das float: left raus zu nehmen und das ganze über absolute Positionsangaben zu machen.

 

[Nighthawk]

andere Möglichkeit wäre noch das float: left raus zu nehmen und das ganze über absolute Positionsangaben zu machen.

wie muss ich das dann genau machen? heisst das, dass sich die inhalte nicht mehr verschieben würden, trotz kleinerer auflösung?

 

[burnred]

über die Positionswerte top, left, right, bottom geht natürlich nur bei position: absolute oder relatvie.

 

[Nighthawk]

ich habs geschafft... mir ist dann irgendwie aufgefallen, dass sich das nur jedesmal ans fenster angepasst hat. jetzt hab ich einfach feste werte vorgegeben und jetzt gehts.

Danke

Kann geschlossen werden!