Adobe Dreamweaver CC 2014 v.13 User Manual

Page 209

Advertising
background image

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:

The complete code looks 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

<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>

202

Advertising
This manual is related to the following products: