Basic layout
« Previous: Getting started | Next: Alignment & floating »
First, let’s build the basic page layout. To begin, we’ll go for a simple 2-column design, with navigation on the left, main content on the right, masthead along the top and footer along the bottom:
| masthead | ||
| nav | content | |
| footer | ||
To create a masthead across the top of the page with a fixed height, simply set the height using the height property. To get the masthead to display right at the top of the page, we need to get rid of the default page margins, and the margin of the <h2> within the masthead:
body {
margin: 0;
}
#masthead {
height: 130px;
}
#masthead h2 {
margin: 0;
}
The navigation menu can be moved to a left column using absolute positioning, and applying a fixed width. Next, add a left margin to the content area so that the two sections don't overlap, and a little padding to give the text some breathing space:
#navigation {
position: absolute;
top: 150px;
left: 0;
width: 200px;
}
#content {
margin-left: 200px;
padding: 20px;
}
Note: we could move the navigation menu to a right column simply by changing left: 0 to right: 0 and margin-left: 200px to margin-right: 200px. Try it!
Let's add some colours to the masthead, navigation and footer sections to distinguish them:
#masthead, #navigation, #footer, #footer a {
background: #3954A1;
color: #fff;
}
And I'll just add a small amount of padding to the footer, which ensures that it sticks to the bottom of the page:
#footer {
padding: 0.5em;
}
Have a look at the page now. Not too impressive yet, but we've got our page into the right kind of shape, which can be finessed and fine-tuned by adding more CSS rules to target each element.