Operation Manual
Div-Tag „sidebar“, links fließend
A. Breite von 200 Pixel B. Obere und untere Auffüllung von 15 Pixel
Abschließend stellt die CSS-Regel für das Div-Hauptcontainertag das Layout fertig:
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
Die #mainContent-Regel bewirkt, dass das „mainContent“-div-Tag über einen linken Rand von 250 Pixel verfügt. Das bedeutet, dass es für einen
Leerraum von 250 Pixel zwischen der linken Seite des „container“-div-Tags und der linken Seite des „mainContent“-div-Tags sorgt. Außerdem
bewirkt die Regel einen Abstand von 20 Pixel auf der rechten, linken und unteren Seite des „mainContent“-div-Tags. Das Anwenden der Regel auf
das „mainContent“-div-Tag hat folgende Auswirkungen:
Der vollständige Code sieht folgendermaßen aus:
Div-Tag „mainContent“, linker Rand: 250 Pixel
A. Linke Auffüllung von 20 Pixel B. Rechte Auffüllung von 20 Pixel C. Untere Auffüllung von 20 Pixel
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
</style>
</head>
<body>
<!--container div tag-->
<div id="container">
<!--sidebar div tag-->
150