CSS: Box centern trotz position:absolute

Kategorie: Webentwicklung

Sollte einer von euch mir durch Zufall auf Twitter folgen hat er bestimmt mitbekommen, das ich in der letzten Zeit wieder wesentlich mehr Code und dafür leider weniger blogge. Der Vorteil dabei ist aber mir fallen immer wieder Sachen auf über die man mal einen Artikel schreiben kann, meistens weil ich an einer bestimmten Stelle nicht sofort weiter komme.

Damit das jetzt aber nicht zu langweilig wird und langsam auch mal etwas inhaltlich wertvolles kommt jetzt mal das Problem und die Lösung.

Das Problem

Mein Problem lag darin, dass ich zwei Divs in einander hatte, von denen beide keine absolute Höhe hatten, der äußere nach links gefloatet und der innere sollte zentriert werden. Das hat aber nicht so geklappt wie man es kennt. Hier mal der Code Snippet wie ich ihn zu Anfang hatte:


<div class=“äußererdiv“>
<div class=“innererdiv>
<p>Irgendein Text als Inhalt

</div>
</div>


Dabei habe ich folgenden CSS Code verwenden:


.äußererdiv{
float: left;
width: 100%;
}

.innererdiv{
margin: 0px auto;
width: 900px;
}


Dabei ist aber gar nichts passiert, was daran lag, dass ich mit dem „margin: 0 auto;“ anscheinend nur zentrieren kann, wenn der äußere Div mit absoluten Werten in Höhe und Breite definiert ist. Da dies ja in bestimmten Moment z.B. bei unterschiedlich langen Inhalten nicht geht muss also eine andere Lösung her.

Die Lösung

Die erste Idee von mir war das Problem mit absoluten Positionen zu lösen, dass hat aber bei dem zentrieren nicht wirklich geholfen. Nach etwas Recherche bin ich dann aber doch noch auf eine praktikable Lösung gestoßen. Hier einfach mal der entsprechende CSS Teil:


.äußererdiv{
float: left;
width: 100%;
}

.innererdiv{
position: absolute;
left: 50%;
margin-left: -450px;
width: 900px;
}


Der Trick liegt wie ihr wahrscheinlich schon erkannt habt darin über den left Befehl die innere Box in die Mitte des äußeren Divs zu schieben und dadurch, dass die halbe Breite wieder abgezogen wird, haben wird einen genau zentrierten Div.

Falls ihr also mal an einer ähnlichen Stelle hängt, hoffe ich das euch der Artikel die ahnungslose Phase erspart in der man nicht weiter kommt oder sie zumindest verkürzt.
Kommentare wie man das Problem eleganter lösen kann sind natürlich auch willkommen.

Geschrieben von Sensei am 02. 5. 2011
Abgelegt unter: Webentwicklung
Tags:

Einen Kommentar hinterlassen

Kategorien