Operation Manual

146
USING DREAMWEAVER
Creating pages with CSS
Last updated 3/28/2012
The next CSS rule creates styling rules for the sidebar div tag:
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
The #sidebar rule styles the sidebar div tag to have a width of 200 pixels, a gray background, a top and bottom padding
of 15 pixels, a right padding of 10 pixels, and a left padding of 20 pixels. (The default order for padding is top-right-
bottom-left.) Additionally, the rule positions the sidebar div tag with float: left—a property that pushes the sidebar div
tag to the left side of the container div tag. The results of applying the rule to the sidebar div tag are as follows:
Sidebar div, float left
A. Width 200 pixels B. Top and bottom padding, 15 pixels
Lastly, the CSS rule for the main container div tag finishes the layout:
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
The #mainContent rule styles the main content div with a left margin of 250 pixels, which means that it places 250
pixels of space between the left side of the container div, and the left side of the main content div. Additionally, the rule
provides for 20 pixels of spacing on the right, bottom, and left sides of the main content div. The results of applying
the rule to the mainContent div are as follows:
Main Content div, left margin of 250 pixels
A. 20 pixels left padding B. 20 pixels right padding C. 20 pixels bottom padding
The complete code looks as follows:
B
B
A
A
C
B