Using CSS for Layout

Here are a few example layouts to get you started. There many different ways to approach this but using the simple structure we have created we can then add/modify to suit our needs.

Fixed-width Layouts

Two Column Fixed – Right Aligned Navigation

#container{width:900px;margin:0 auto}
#content{float:left;width:650px}
#navigation{float:right;width:250px}
#footer{clear:both}

Two Column Fixed – Left Aligned Navigation

#container{width:900px;margin:0 auto} 
#content{float:right;width:650px} 
#navigation{float:left;width:250px} 
#footer{clear:both}

Fluid-width Layouts

Two Column Fluid – Right Aligned Navigation

#container{width:80%;margin:0 auto}
#content{float:left;width:80%}
#navigation{float:right;width:20%}
#footer{clear:both}

Two Column Fluid – Left Aligned Navigation

#container{width:80%;margin:0 auto} 
#content{float:right;width:80%} 
#navigation{float:left;width:20%} 
#footer{clear:both}