Posted By

michellebracken on 08/18/11


Versions (?)

Basic 2-column CSS layout (fixed width, centered, header and footer, sidebar on right)

 / Published in: CSS

This is a pretty common website layout and it’s rather easy to code. The specific widths are arbitrary, but it is necessary to include a width. The keys are centering the wrapper as described above in this post, floating both columns, and clearing the footer div. You could also float the sidebar div to the right. Either will work, though I find it easier to float both in the same direction.

  1. 1 #wrapper {width:960px; margin:0 auto}
  2. 2 #content {float:left; width:600px}
  3. 3 #sidebar {float:left; width:360px}
  4. 4 #footer {clear: both}

Report this snippet  

You need to login to post a comment.