3 Spalten Layout - DIV höhe 100%

[sushi]

Hallo Leute...

ich plage mich jetzt schon mehrere Stunden mit einem Problem, bei dem ich einfach zu keinem brauchbaren Ergebnis komme. Vielleicht kann mir einer von Euch helfen es zu lösen. :-)

Ich habe folgende typische 3 Spalten Seitenstruktur:

|-------------------------------|
| #logo  | #banner    | #search |
|-------------------------------|
| #col1  | #col3      | #col2   |
| 250px  | flexible   | 230px   |
|-------------------------------|

#footer

Gedacht war, das sich die linke Spalte (col1) und die rechte Spalte (col2) jeweils immer bis an das Seitenende bis runter zum Footer ziehen. Also sozusagen auf 100%. Leider funktioniert das trotz aller Anstrengungen irgendwie nicht.

Meine DIVs habe ich folgendermaßen Aufgebaut:

  
<div id="page_margins">  
  <div id="page">  
    <div id="header">my header</div>  
    <div id="main">  
      <div id="col1">  
        <div id="col1_content" class="clearfix">my menu</div>  
      </div>  
      <div id="col2">  
        <div id="col2_content" class="clearfix">my teaser</div>  
      </div>  
      <div id="col3">  
        <div id="col3_content" class="clearfix">  
          <div id="col3_content_wrapper" class="floatbox">my content</div>  
        </div>  
      </div>  
  </div>  
</div>  

Und hier das nötige CSS dazu:

  
  html { min-height: 100%; height:auto !important; height: 100%; margin: 0px; padding: 0px; }  
  body { background: #fff; min-height: 100%; height:auto !important; height: 100%;  margin: 0px; padding: 0px; }  
  
  #page_margins { min-height: 100%; height:auto; height: 100%; min-width: 860px; max-width: 90em; margin: 0 auto; }  
  #page{ min-height: 100%; height:auto; height: 100%; background: #fff; position:relative; }  
  
  #header { height: 170px; padding: 0px; margin: 0px;overflow:hidden; }  
  
  #main { background: #fff; padding: 0px; margin: 0px; }  
  
  #col1 { z-index: 999; background: #25589e; min-height: 100%; height:auto !important; height: 100%; width: 250px; }  
  #col1_content { padding: 30px 0px 30px 0px; }  
  
  #col2 { z-index: 999; background: #ecefff; min-height: 100%; height:auto !important; height: 100%; width: 230px; }  
  #col2_content { padding: 30px 20px 30px 20px; }  
  
  #col3 { z-index: 0; background: #fff; padding: 0px; margin: 0% 20% 0% 20%; }  
  #col3_content { min-height: 100%; height: 100%; padding: 30px 100px; }  
  
  .clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }  
  .clearfix { display: inline-block; }  

Was mache ich falsch bzw. wo habe ich hier etwas übersehen?

Vielen Dank für Eure Hilfe...