CSS float and height issue

Question

I am trying to create a two column webpage. The both columns have dynamic height, but I want both of them to extend 100% of the page.

What I mean is if you have a page

+------------------------+
|  Header                |
+------------------------+
| Col1        |  Col2    |
|             |          |
|             |          |
|             |          |
+-------------+----------+
|    footer              |
+------------------------+

I want as you see above both columns to extend the entire height of the page.

Right now I have

<div id="main">
  <div id="col1"></div>
  <div id="col2"></div>
</div>

#col1 {float: left;}
#col2 {float: right;}

The issue is no matter what I try the only way I can have a column grow in height is by using a static number

#col2 {
  float: right;}
  height: 100px;
}

This does not work because the content is dynamic.

I have tried changing the floats and putting clears all over the place but no matter what I do my page ends up looking like this

+------------------------+
|  Header                |
+------------------------+
| Col1        |  Col2    |
|             |          |
|             |          |
|             +----------+
|             |          |
|             |          |
|             |          |
+-------------+----------+
|    footer              |
+------------------------+

Where column two is shorter than column one.

How do you have two side by side columns that extend the height of a page?

edit

I have gone threw and tried all the suggestions with no fruition. I want to add something. If there is a better way to do this without floats I am willing as well. For instance relative position. the only issue is the main div must be centered in the body which I cannot seem to get working with absolutes.

Answer 1

I have a solution for you. Live example: http://jsfiddle.net/Qbdab/

HTML:

<div id="header">
</div>
<div class="colmask doublepage">
    <div class="colleft">
        <div class="col1">
        </div>
        <div class="col2">
        </div>
    </div>
</div>
<div id="footer">
</div>

CSS:

#header {
    background: lightgreen;
    clear:both;
    float:left;
    width:100%;
}
.colmask {
    clear:both;
    float:left;
    width:100%;            
    overflow:hidden;
}
.colleft {
    float:left;
    width:100%;
    position:relative;
}
.col1,.col2{
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;
}

.doublepage {
    background: lightblue;   /* right column background colour */
}
.doublepage .colleft {
    right:50%; /* right column width */
    background: salmon; /* left column background colour */
}
.doublepage .col1 {
    width:46%; /* left column content width (column width minus left and right padding) */
    left:52%; /* right column width plus left column left padding */
}
.doublepage .col2 {
    width:46%; /* right column content width (column width minus left and right padding) */
    left:56%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */
}
#footer {
    background: pink;
    clear:both;
    float:left;
    width:100%;
}

I used this http://matthewjamestaylor.com/blog/perfect-2-column-double-page.htm and slimmed it down to its basics whilst also colouring it to make it obvious that it works.