Operation Manual
untere Auffüllung von 15 Pixel, eine rechte Auffüllung von 10 Pixel und eine linke Auffüllung von 20 Pixel hat. (Die Auffüllung erfolgt
standardmäßig von oben rechts nach unten links.) Darüber hinaus positioniert die Regel das „sidebar“-div-Tag mit „float: left“. Diese Eigenschaft
schiebt das „sidebar“-div-Tag auf die linke Seite des „container“-div-Tags. Das Anwenden der Regel auf das „sidebar“-div-Tag hat folgende
Auswirkungen:
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:
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
1
2
3
4
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>
206