Oft wünscht man sich in einem CSS-Layout einen Div-Container, welcher als Wrapper fungiert und 100 Prozent der im Browser zur Verfügung stehenden Höhe einnimmt. Möchte man dieses Verhalten browserkompatibel gestalten, ist das die Möglichkeit:
HTML
1 2 3 | <body> <div id="wrapper"></div> </body> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | html, body { height: 100%; } div#wrapper { min-height: 100%; height: auto !important; height: 100%; background-color: seagreen; width: 300px; } |
Wenn man einen Div-Container über ein anderes Div-Element legen möchte, muss man dem umschließendem Eltern-Element das Attribut position: relative; zuweisen und den darin befindlichen Div-Containern die Eigenschaft position: absolute; geben. Dadurch liegt dann das Kinder-Div, welches zuletzt im Code definiert wurde, am Obersten. In meinem Beispiel liegt child_2 also über child_1:
HTML
1 2 3 4 | <div id="parent">
<div id="child_1"></div>
<div id="child_2"></div>
</div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | #parent { position: relative; } #child_1, #child_2 { width: 200px; height: 200px; position: absolute; } #child_1 { background-color: red; } #child_2 { background-color: green; } |
Möchte man die Reihenfolge der Überlappung selbst bestimmen, so muss man den z-index einsetzen. Ein Element mit höherem z-index liegt über Elementen mit niedrigerem z-index. Mit folgender CSS-Code-Änderung würde child_1 über child_2 liegen:
1 2 3 4 5 6 7 8 9 10 11 | #child_1 { background-color: red; z-index: 2; } #child_2 { background-color: green; z-index: 1; } |
Falls der Internet Explorer die Angabe margin: auto; zum Zentrieren von DIV-Containern nicht befolgt, dann hilft dieser Trick:
#container { position: relative; width: 600px; left: 50%; margin-left: -300px; }
Mit left: 50%; wird der Container um 50% des Anzeigebereichs nach rechts verschoben. Das ist etwas zu viel, deshalb muss man die halbe Breite bei margin-left angeben, um die Verschiebung auszugleichen und das DIV mittig zu positionieren.
Es gibt viele Möglichkeiten, um über eine CSS-Datei einen div-Container mittig auf einer Webseite auszurichten.
Hier einige Beispiele:
1 2 3 4 5 | #mittig { margin-left: auto; margin-right: auto; } |
+ Funktioniert sehr gut im Firefox 3.5
+ Funktioniert sehr gut mit variablen Breiten
- Harmoniert nicht mit Internet Explorer 8
1 2 3 4 | #mittig { margin: 0 auto; } |
+ Funktioniert sehr gut im Firefox 3.5
+ Funktioniert sehr gut mit variablen Breiten
- Harmoniert nicht mit Internet Explorer 8
1 2 3 4 5 6 7 | #mittig { left: 50%; width: 500px; margin-left: -250px; position: relative; } |
+ Funktioniert mit Firefox 3.5
+ Funktioniert mit Internet Explorer 8
- nicht vorteilhaft für flexible Layouts
- Harmoniert wegen der negativen Abstände nicht mit IE6
0