3 Spalten Layout in einem mittig zentrierten div

[Sanjoy]

Hallo liebe Helfer,

ich habe ein div mittig (horizontal) auf der Seite positioniert mit Hilfe von:

DIV.div_for_message {
 width: 50%;
 height: 200px;
 border: 1px solid #666;
 margin: 20px 25%;
}

1. Frage: Ist dies ein akzeptaler, möglichst zu vielen Browsern kompatibler Weg?

Nun möchte ich in diesem div ein 3 Spalten-Layout realisieren, wobei die Spalten links und rechts eine feste Breite haben sollen und die mittlere Spalte den restlichen Platz einnehmen soll. Habe es erst über float und dann über Positionierung versucht. Meine Lösung bis jetzt:

DIV.div_for_message DIV#div_message_left {
 background-color: #fee;
 height: 150px;
 width: 20px;
 border: 1px solid #666;
 position: absolute;
 left: 25%;
}
DIV.div_for_message DIV#div_message_middle {
 background-color: #ffc;
 height: 150px;
 border: 1px solid #666;
}
DIV.div_for_message DIV#div_message_right {
 background-color: #fee;
 border: 1px solid #666;
 height: 150px;
 width:20px;
 position: absolute;
 right: 25%;
}

Ich weiß, dass das so nicht elegant ist! 2. Frage: Wie bekomme ich das besser hin?
3. Frage: Selbst bei dieser Lösung habe ich das Problem, dass die linke Spalte ca. 2 Pixel über den linken Rand des umgebenen Divs ragt. Liegt das am Rahmen?

Vielen Dank und einen lieben Gruß
Sanjoy

[Beat]

3. Frage: Selbst bei dieser Lösung habe ich das Problem, dass die linke Spalte ca. 2 Pixel über den linken Rand des umgebenen Divs ragt. Liegt das am Rahmen?

Nein, am fehlenden position:relative des Eltern-Elements.

[Sanjoy]

Vielen Dank schon mal...also aktuelle Korrektur:
DIV.div_for_message {
 border: 1px solid #999;
 background-color: red;
 width: 50%;
 height: 200px;
 margin: 20px 25%;
 position: relative;
}

DIV.div_for_message DIV#div_message_left {
 background-color: blue;
 height: 150px;
 width: 20px;
 position: absolute;
 left: 0;

}

DIV.div_for_message DIV#div_message_middle {
 background-color: #ffc;
 height: 150px;
 margin: 0 20px;

}

DIV.div_for_message DIV#div_message_right {
 background-color: blue;
 height: 150px;
 width:20px;
 position: absolute;
 right: 0;
}

Gute oder schlechte Lösung?

Lieben Gruß
Sanjoy

[suit]

Gute oder schlechte Lösung?

ja, in mehrerlei hinsicht
http://www.css4you.de/wslayout1/ex0010.html

zudem ist DIV.div_for_message ein unglücklicher klassename

nenns entweder #message oder .message - vielleicht is es später kein div mehr (man weiss ja nie)

weiters ist left/middle/right etwas unklug - vielleicht änderst du später die reihenfolge oder du setzt die dinger untereinander, oder nur 2 nebeneinander und den anderen drunter

zudem solltest du den selektor DIV nicht groß schreiben (und das element im html ebenfalls nicht) das spart dir in zukunft einige sorgen

[Steel]

Hi!

Du kannst Dein div so sicherlich zentrieren. Aber warum so kompliziert?

Grundsaetzlich ist ein margin: 0px auto; Eine Loesung alles zu zentrieren, egal wie breit es ist.

Du gehst nicht weiter aud Deine Anforderungen ein. Warum ist das Inhaltsdiv 50% breit? Soll deine Seite oder nur dieses div immer zentriert sein (egal, wenn die beiden aeusseren Spalten eh immer identisch Breit sind)

Wenn es eigentlich egal ist, wie breit deine mittlere Spalte sein soll, dann nimm die Standardloesung: Einen zentrierten Container mit 3 Spalten drin.

Da es diverse Moeglichkeiten gibt spare ich mir hier aber weitere Ausfuehrungen und verweise dich auf diverse Tutorials im web. Auf der Intensivstaion gibts z.B. ein paar anschauliche Templates.

Ansonsten beschreib doch bitte mal genauer, was du moechtest.

[Sanjoy]

Hallo Steel,

erstmal vielen Dank für deine Antwort und den Link!
Es ging nur darum ein div mittig zu positionieren, nicht das gesamte Seitenlayout.
Ich dachte margin:auto; könnte der IE < Version 6 nicht, deswegen hatte ich mich dagegen entschieden.

War vorhin einfach zu doof, ich wollte mit position:absolut arbeiten und das ging nicht, da das Elternelement ja eine andere Positionierung benötigt als die Standardeinstellung static. Aber ich kann es ja einfach relativ positionieren und dann funktionierts - manchmal steht man einfach auf der Leitung.

Lieben Gruß
Sanjoy

[Steel]

Hi!

erstmal vielen Dank für deine Antwort und den Link!

Bitte.

Es ging nur darum ein div mittig zu positionieren, nicht das gesamte Seitenlayout.

Kein Problem. Wenn Du ein Teil mittig positioniert haben moechtest und 2 Spalten links und rechts daneben, kannst Du diese in das zentrierte (mit position:relativ versehen) Element schreiben und dann absolut links und rechts daneben positionieren. (links mit left:-breite und rechts analog mit right)