Using Dreamweaver CS3 and CSS To Control Page Layout - Part 2
In Part 1 of Using Dreamweaver CS3 and CSS To Control Page Layout I showed you a simple way to center a design using auto margins and negative margins. In Part 2 we will tackle the 2 Column Float Based Layout.
CSS Float Based Layouts - Two Column
Personally I find this layout technique to be the easiest method of them all to implement. Some people like using absolute positioning and negative margins but for me the floats are king. Put simply, in a CSS float based layout all you need to do is set the width of the element and then float it left or right. Sound Simple enough?
It is important to note that when using floating elements they are taken out of the normal flow of the document. Therefore the floats need to be cleared at various points in the layout. What I would suggest and it is probably the most common way to do this is to float nearly everything and then clear maybe once or twice at different point in the page, for example the page footer.
Let’s have a look at an example.
1. The basic (X)HTML markup would start something like this:
<div id="wrapper">
<div id="header">
...........
</div>
<div id="content">
...
</div>
<div id="mannavigation">
....
</div>
<div id="footer">
....
</div>
</div>
In this case the Main Navigation will be on the left and the Content will appear on the right. From a useability and accessibility standpoint you will notice that the Content Area appears before the Main Navigation. This is so that screenreader users etc do not have to go through a long list of links before they get to the content.
2. The way I prefer to do my floating is to create a “virtual gutter” between the floated elements. Alot of people simply float both elements to the left and then create the gutter using padding or margins. Because of the buggy nature of browsers this can cause tightly packed layouts to break leaving the columns to drop below each other. To achieve this “virtual gutter” it is just a matter of floating one element to the left and one to the right.
3. Now for the CSS, Simply set the width of the 2 columns and then float the Navigation to the left and the Content to the right. And also the width of the Wrapper div. Then Clear both floats in the footer.
width:520px;
float:right;
}
#mainnavigation{
width: 180px;
float: left;
}
#footer{
clear:both;
}
That is all there is to it, the basic layout is now all done. And now with a couple of visual enhancements it will be complete.
4. Lets give the navigation text some breathing room, by applying some padding to the navigations area’s content.
padding-top: 20px;
padding-bottom: 20px;
}
#mainnavigation li{
padding-left: 20px;
padding-right: 20px;
}
Notice I have added the horizontal padding to the li element. You could apply it directly to the navigation element but it will invoke the IE 5.x proprietary box model.
5. Next give the right hand side of the content area some space. Again instead of applying padding directly to the element I find it better to apply it to the content itself to avoid the IE box model problems.
padding-right: 20px;
}
And there we go, a really simple easy solution for a two-column CSS based layout.
In the next installment I will be going through the Holy Grail of Layouts the 3 Column Layout. Make sure you don’t miss it by SUBSCRIBING to my 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.
March 19th, 2008 at 12:49 am
Loved the article. I now get the float property much better.