[CSS] schon wieder :-(

[nul]

Ich mach langsam Fortschritte mit CSS, aber einige Probleme bleiben noch immer ...

Folgendes Layout:

/****************************************************
 * Layout:
 *
 *   -------------------------------------------
 *   |                 HEAD                    |
 *   -------------------------------------------
 *   |           |                             |
 *   |           |                             |
 *   |   LEFT    |      RIGHT                  |
 *   |           |                             |
 *   |___________|_____________________________|
 *   |                 FOOT                    |
 *   |_________________________________________|
 ***************************************************/

und folgendem CSS-Style:

div#head {

}

div#content {
	background-color:	#000000;
	color:			#FFFFFF;
}

div#right {
	margin-left: 		208px;
	overflow: 		auto;
}

div#left {
	position: 		absolute;
	width: 			200px;
	left: 			0px;
	padding:		0px;
	margin:			0px;
	margin-left:		24px;
}

div#foot {
}

Das Problem liegt nun daran, wenn der Text im left Element laenger ist, als im right Element, geht der Text ueber das div hinaus und ueberschreibt sowol foot sowie jeden weiteren Text underhalb.

Die Frage ist also, wie kann ich das verhindern?

mfg nul

[Waxolunist]

Hau einmal das position: absolute; weg.

Das nächste wäre: Du hast eine Breite von 200px, beginnend bei 24px (margin-left). Das Rechte Div beginnt jedoch bei 208px - die überschneiden sich also.

mfg, christian

[Waxolunist]

Also hier ist mein mini-css, dass wie ich glaube, genau das erreicht, was du möchtest:

div#head {
	width: 100%;
	background-color: #0000FF;
}
 
div#left {
	float: left;
	width: 20%; 
	min-width: 150px;
	background-color: #00FF00;
}

div#right {
	float: right;
	width: 80%;
	background-color: #FF0000;
}

div#foot {    
	clear: both;    
	background-color: #FF00FF;
}

lg, christian

[Pingu]

Also mit dem float wäre ich vorsichtig. Denn das bedeuted, dass dann weitere entsprechende floats im Text innerhalb von rechts bzw. links praktisch nicht anwendbar sind, z.B. um Bilder herum. Eine Aufhebung gilt nämlich leider immer global und nicht lokal innerhalb des Elternelementes.

[Waxolunist]

Ich weiß leider nicht genau was du meinst.

Was meinst du mit, weitere floats sind nicht anwendbar?
Kannst du ein Beispiel dafür geben?

[Pingu]

Ich habe mal ein kleines Bildchen gemalt, welches es hoffentlich klarer macht (siehe Anhang).

[Waxolunist]

Also funktioniert eh alles, man muss halt mit den clears auch aufpassen.

[Pingu]

Die clears braucht man aber, wenn nämlich der Text neben einem Bild kürzer sein sollte als dass Bild. Deswegen meine Meinung, dass flots wirklich nur für den Content und nicht für das allg. Layout verwendet werden sollten.

[Waxolunist]

Ok, ich verstehe so langsam was du willst. Allerdings, wenn du so Kritik daran übst, musst du schon Alternativen anbietet. Ich zitiere nur einmal kurz einen Artikel von Selfhtml:

Neben position ist float die CSS-Eigenschaft, mit der Mehrspaltigkeit überhaupt möglich wird.

Wie erreichst du ein Spaltenlayout ohne floats?

[nul]

Mein Layout hat ja auch zwei Spalten, hat aber leider das Problem mit left.

[Waxolunist]

Mein Layout hat ja auch zwei Spalten, hat aber leider das Problem mit left.

Verstehe ich nicht. Stimmt irgendwas mit meinem CSS nicht? Das macht doch genau das, was du möchtest. Kopfzeile, Fußzeile, Linke Spalte, Rechte Spalte. Beide können beliebig lang sein.