CSS Layout 2-Column fixed-fluid

Question

Hello everyone,

I was wondering if anyone here had a fairly simple tutorial for the following 2 column css layout. A left fixed column and a fluid content column, with a header and footer and equal column heights.

Thanks in advance

Answer 1

The one I use is the faux-column layout hack, which includes no scripting.

Here's a tutorial that seems to be a simple explaination of the concept: dustinbrewer.com

Here's the original alistapart.com article that I learned from: alistapart.com

Good luck!

Answer 2

Most of what I know about HTML and CSS I have learned from HTML Dog. HTML Dog has a page in its tutorial about making a two column layout with a footer.

Answer 3

You can also look at Layout Gala, where you can see about 40 different layouts for two and three columns with fixed and fluid widths.

Answer 4

Try this Dynamic Drive layout and its relatives (that I was pointed to via a similar question of mine).

Answer 5

The one approach that helped me solve the fixed-fluid 2 column problem with faux column including footer was the solution of Bon Rouge.

It needs one small IE hack which doesn't bother me since the layout is otherwise clean and proper. Not like some others that use messy "innertube" divs to provde paddings, etc.

The problem with some solutions is that they take flexibility away from you because they're so fragile. The Bon Rouge appraoch seems to be quite sturdy.

I didn't manage with the dynamic drive approach.