2

I have a test three-column page up ( http://hussain.mooo.com ). However, the left and right columns refuse to stretch to the bottom of the page. The XHTML and CSS is valid, I'm using Firefox, and they're all inside a wrapper div. Any help?

Thanks in advance.

Hussain
  • 633
  • 1
  • 16
  • 26
  • Dupe: http://stackoverflow.com/questions/73086/three-column-web-design-with-variable-sides, http://stackoverflow.com/questions/83279/best-way-to-implement-a-3-column-website-using-div-tags. – Tomas Aschan Jan 24 '10 at 20:50
  • Just as a trick, and not a solution (for many reasons...) you may do that by using javascript – Strae Jan 24 '10 at 22:36

3 Answers3

3

The easiest, most famous and most used way to do so is by using Faux Columns.

You can read about this useful technique here: http://www.alistapart.com/articles/fauxcolumns/

In a comment and in another answer to this same question @Tharkun pointed out that this solution only works with fixed width columns. This is true for the original version of Faux Columns, but it's easy to extended this technique to work with liquid layouts (liquid layout = at least a column width specified in %) and here is explained how to do so: http://www.communitymx.com/content/article.cfm?cid=afc58

Andrea Zilio
  • 4,444
  • 3
  • 29
  • 34
1

As @Andrea Zilio says you could use the faux column technique but this would mean to give up the fluid width of at least one or two columns.

There are other approaches for 100% height in multi-column layouts with fluid width.

Mathew James Taylor has a great explanation of how multi-column fluid 100% height layouts works and a couple of layouts you can copy (by looking at the source code).

markus
  • 40,136
  • 23
  • 97
  • 142
  • Faux columns can be extended and used in liquid layouts, take a look here: http://www.communitymx.com/content/article.cfm?cid=afc58 – Andrea Zilio Jan 24 '10 at 22:20
0

Take a look at the page layouts at maxdesign.

markus
  • 40,136
  • 23
  • 97
  • 142
Tomas Aschan
  • 58,548
  • 56
  • 243
  • 402