CSS: Positionierung innerhalb einer Box
Geschrieben von MK   
08.08.2005

Der Beitrag CSS: Zentrieren von Blockelementen zeigt auf, wie man eine Seite in der Mitte des Browserfensters darstellen kann. Wie können nun Blockelemente innerhalb dieser Box positioniert werden?

Eine Möglichkeit besteht darin, sogenannte "floatende" Boxen zu verwenden.

Eine weitere hier vorgestellte Möglichkeit ist es, die relative und absolute Positionierung von Blockelementen zu nutzen.

<html>
<head>
<title>Titel</title>
<style type="text/css">
<!--
body { text-align: center; /* für MSIE 5.x */ }
#box { text-align: left; margin: 0 auto; position: relative; width: 760px; height: 600px; border: 1px solid red; }
#content { position: absolute; top: 10px; left: 20px; width: 280px; height: 200px; border: 1px dotted green; }
-->
</style>
</head>
<body>
<div id="box">
<div id="content">Inhalt</div>
</div>
</body>
</html>

Der "#box-Bereich" ist relativ zum Elternelement "body" positioniert. Der "#content-Bereich" wiederum wird absolut zu seinem Elternelement ("#box") positioniert. Innerhalb des "#box-Bereiches" kann man so jede beliebige Position fixieren. Die Eigenschaften "top" und "left" sind durch die Eigenschaft "margin" ersetzbar (margin: 10px 0 0 20px;).

Bei der Positionierung von Blockelementen bitte den "Box Model Bug" des MSIE 5.x beachten.

Näheres dazu unter CSS: Box Model Hack. Anregung von evolt.org
Letzte Aktualisierung ( 31.03.2006 )