Designing a 2-Column CSS Layout
Thursday, January 11th, 2007The holy grail of Web 2.0 website design is going 100% with CSS for the page layout. There are many reasons for that but they key is separating the presentation from the data. In this case, the presentation (including the layout) will be part of the CSS.
One of the most common layouts out there is the 2-column layout, where the smaller column is used for some sort of navigation and the main content of the page is in the big column. The header is usually reserved for the main navigation, such as tabs for main sections. The footer is just for the small print.
The Output
Here's what we have in mind:
Red border outlines the header, yellow is for the footer, blue is our small side column and green is the main content area.
