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...

[Felix Riesterer]

Liebe(r) sushi,

bevor ich versuche Deine div-Suppe zu löffeln, verweise ich Dich lieber auf molilys sehr hilfreichen Artikel Grundlagen für Spaltenlayout mit CSS. Guten Appetit!

Liebe Grüße,

Felix Riesterer.

[sushi]

Liebe(r) sushi,

bevor ich versuche Deine div-Suppe zu löffeln, verweise ich Dich lieber auf molilys sehr hilfreichen Artikel Grundlagen für Spaltenlayout mit CSS. Guten Appetit!

Hallo Felix..

vielen dank für den link.. leider bringt mich das auch nicht viel weiter wie es scheint :-(  stehe irgendwie total auf dem schlauch und weiß einfach nicht wo ich hier noch ansetzen soll.

gruß
sascha

[Gunther]

Hi Sascha!

vielen dank für den link.. leider bringt mich das auch nicht viel weiter wie es scheint :-(  stehe irgendwie total auf dem schlauch und weiß einfach nicht wo ich hier noch ansetzen soll.

In solchen Fällen solltest du dir einen der wesentlichen Vorteile des Webs zu Nutze machen, nämlich dir_angucken_, wie es andere schon hundert-, tausendfach gemacht haben.

Tools wie u.a. die "Webdeveloper Toolbar" und "Firebug" können dabei eine zusätzliche Hilfe sein.

Ggf. ebenfalls hilfreich/ lehrreich könnte auch YAML sein.

Gruß Gunther

[Gunnar Bittersmann]

@@sushi:

nuqneH

A List Apart:
Multi-Column Layouts Climb Out of the Box
In Search of the Holy Grail

Qapla'