Using Dreamweaver CS3 and CSS To Control Page Layout - Part 3
A CSS Three-Column Floated Layout - “The Holy Grail”
This is one of the most sought after techniques on the web. A semantically correct 3 Column Layout using CSS (Cascading Style Sheets). Interestingly enough it is very easy to do. If you haven’t read Part 2 of Using Dreamweaver CS3 and CSS To Control Page Layout then I suggest you take a look before continuing with this example as it is very closely related.
The only difference being the addition of 2 more divs inside the content div. One for the Main Content and the other for the Secondary Content. If you recall from Part 2 we had a Wrapper Div, Main Navigation Div, Content Div and a Footer. The Main Nav was floated to the left and the Content to the right, creating a “virtual gutter” between the two.
This time inside the Content Div, I am going to use the same principal. By adding a mainContent div and floating that to the left and then adding a secondaryContent div and floating that to the right.
As with the 2 Column Layout the CSS is very straight forward.
#mainContent{
width: 320px;
float: left;
}
#secondaryContent{
width: 180px;
float: right;
}
The last thing that I would do is to remove the padding from the content element and apply it to the content of the secondary content instead.
#secondaryContent h1, #secondaryContent h2, #secondaryContent p{
padding-left: 20px;
padding-right: 20px;
}
You should now be left with a very solid 3 Column Layout.
Don’t miss more great content and tutorials, make sure you SUBSCRIBE to the Dreamweavers Spot’s RSS Feed.
You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.
Leave a Reply