Thursday, November 11, 2010

Coding a tableless (CSS) two-column layout

As we decided, the layout will have 4 main portions - header, footer, content space and navigation. Header and footer take up the entire width, thus they are easy to set up and style, while content and navigation reside beside each other, sharing the layout width. Let's start with the easiest part.

The first thing I code is a div with ID container. Some people call it wrapper, some call it outer, you can call it jimmy if you want to give a personal feel to it - it's purpose is the same in either case: holding the entire layout and positioning it regarding the body. Width of this element will be the maximum width of your layout.

Inside this main div, we will insert header, content, navigation and footer.

Tutorial: Floating an image and caption
Nela Dunato
Smashing Magazine: CSS Float Theory
Tableless Tables

Stretch a Box to its Parent’s Bounds

No comments: