Layout mit CSS

void*

Hallo!

Ich möchte gerne folgendes Layout mit CSS erstellen:
1. Oben ein "Header" mit fester Breite und Höhe.
2. Ein mittlerer Teil in dem links die Navi (feste Breite, variable Höhe) ist, in der Mitte Inhalt (feste Breite, variable Höhe) und rechts ein Bild (feste Breite, feste Höhe).
3. Einen "Footer" mit fester Breite und Höhe.

Mein Problem:
Wenn im Inhalt z.B. ein langer Text (siehe Kommentar im XHTML-Code) steht überlappt der meinen "Footer". Ich habe mit vielen Kombinationen rumgespielt, aber ich schaffe es nicht, dass sich die umschliessende Box (mittlerer Teil, im Code "center_frame") automatisch vergrößert.

Jetzt weiß ich nicht, ob mein Ansatz dämlich ist oder ob mir an der entscheidenden Stelle noch das Verständnis für die Boxen fehlt (oder beides?!). Für einen schubser in die richtige Richtung wäre ich echt dankbar!

Mein Versuch sieht so aus (ein bisserl viel Code, ich weiß , aber es ist so gut wie möglich komprimiert:
xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">

  <head>
  <meta http-equiv = "content-type" content = "text/html; charset=UTF-8" lang = "en" />
  <title>Test</title>
  <link rel = "stylesheet" type = "text/css" href = "mss.css" />
  </head>

  <body>
    <div id = "header">
      header
    </div>
    <div id = "center_frame">
      center frame
      <div id = "navigation_frame" >
        navigation frame
      </div>
      <div id = "content_frame" >
        content frame
        <div id = "content_top" >
          content top
        </div>
        <div id = "content_header" >
          content header
        </div>
        <div id = "content" >
         <p>content</p>
         <!-- wenn hier viel steht wird's blöd -->
         <p>content</p>
        </div>
        <div id = "content_bottom" >
          content bottom
        </div>
      </div>
      <div id = "rhs" >
        rhs
      </div>
    </div>
    <div id = "footer" >
      footer
    </div>
  </body>

</html>

css:

*
{
  margin: 0px;
  padding: 0px;
}

body
{
  color: #000000;
  background-color: #000000;
  overflow: visible;
  font-family: 'verdana', 'helvetica', sans-serif;
  font-size: 100%;
}

#header
{
  background-color: #ff00ff;
  width: 984px;
}

#center_frame
{
  background-color: #ff0000;
  min-height:500px;
  width: 984px;
}

#navigation_frame
{
  background-color: #ffff00;
  position: absolute;
  top: 70px;
  left: 0px;
  height: 200px;
  width: 166px;
  display: inline;
}

#content_frame
{
  background-color: #00ffff;
  position: absolute;
  left: 167px;
  /*height: 350px;*/
  width: 400px;
  display: inline;
}

#rhs
{
  background-color: #000fff;
  position: absolute;
  top: 70px;
  left: 567px;
  height: 200px;
  width: 243px;
  display: inline;
}

#footer
{
  background-color: #ff00ff;
  width: 984px;
  display: block;
}

Shade Of Mine

suchst du sowas?
http://www.intensivstation.ch/files/templates/2/template-1.html

PRIEST

hi, schau dir lieber nochmal einpaar beispiele an wie etwa den link von shade

void*

Vielen Dank, wunderbar, darauf kann ich aufbauen!