Thomas Wallace: Lectures and Resources - A collection of website design lectures and resources

Using CSS for layout

Here are a few example layouts to get you started. There many different way to approach this but using the simple structure we have created we can then add/modify to suit our needs. There are additional examples on this page but you'll need to modify your html structure a bit inorder to acheive some of the more complex layouts. To see an example of the modified html structure look at this page or you can download and replace your existing structure with the dummy content and structure within this document.

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}
      

What I'm Reading

RSS Feed IconView More

Announcements

  • 1.24.2012
    Structure, Content, Design, Behavior
My Calendar