Operation Manual
pixels, een opvulling rechts van 10 pixels en een opvulling links van 20 pixels. (De standaardvolgorde voor padding is van rechtsboven naar
linksonder.) Daarnaast wordt de sidebar div-tag gepositioneerd met float: left—een eigenschap waardoor de sidebar div-tag naar de linkerkant van
de container div-tag wordt geduwd. Het toepassen van de regel op de sidebar div-tag heeft het volgende resultaat:
Sidebar div, links zwevend
A. Breedte 200 pixels B. Celopvulling boven en onder, 15 pixels
Ten slotte maakt de CSS-regel voor de container div-hoofdlabel de lay-out af:
Volgens de regel #mainContent krijgt de main content-div een linkermarge van 250 pixels, wat betekent dat er een ruimte van 250 pixels wordt
geplaatst tussen de linkerkant van de container-div en de linkerkant van de main content-div. Daarnaast zorgt de regel voor een ruimte van 20
pixels aan de rechter-, onder- en linkerkant van de main content-div. Het toepassen van de regel op de mainContent-div heeft het volgende
resultaat:
De volledige code ziet er zo uit:
Main Content div, linkermarge van 250 pixels
A. 20 pixels opvulling links B. 20 pixels opvulling rechts C. 20 pixels opvulling onder
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
23
24
<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>
206