Tobi: Automatische Höhe für einen div Bereich

Hallo zusammen

Ich habe da ein Problem mit der style.css.

Ich möchte, dass die Website so aufgebaut ist:
[IMG]http://img523.imageshack.us/img523/8606/cssht9.png[/IMG]
Also die Mindesthöhe für den content soll gleich hoch sein wie das Menü.
Es macht auch nichts, wenn die Hintergrundgrafik für den content sich wiederholt (für das ist sie auch gedacht...)...

Hier meine style.css:

* {margin:0px;padding:0px;top:0px;left:0px;}  
body{  
 text-align: center;  
 background-color: #31312f;  
}  
#central{  
 margin-right: auto;  
 margin-left: auto;  
 margin-top: 10px;  
 margin-bottom: 10px;  
 position: relative;  
 width: 772px;  
 text-align: left;  
 background-color: #FFFFFF;  
}  
#header{  
 background-image: url(images/header.PNG);  
 height: 152px;  
 width: 772px;  
 left: 0px;  
 top: 0px;  
}  
#header p{  
 font-size: 35px;  
 font-style: normal;  
 line-height: normal;  
 font-weight: bolder;  
 color: #FFFFFF;  
 text-decoration: none;  
 margin-left: 35px;  
 font-family: "Arial", Courier;  
 margin-top: 8px;  
}  
#header h1{  
 font-size: 12px;  
 font-style: normal;  
 line-height: normal;  
 font-weight: bolder;  
 color: #FFFFFF;  
 text-decoration: none;  
 margin-left: 50px;  
 font-family: "Arial", Courier;  
 margin-top: 0px;  
}  
  
#news{  
 background-image: url(images/newsbg.PNG);  
 height: 105px;  
 width: 772px;  
 left: 0px;  
 top: 0px;  
}  
#news p{  
 font-size: 12px;  
 font-style: normal;  
 line-height: normal;  
 font-weight: normal;  
 color: #FFFFFF;  
 text-decoration: none;  
 margin-left: 10px;  
 font-family: "Arial", Courier;  
}  
#news h1{  
 font-size: 12px;  
 font-style: normal;  
 line-height: normal;  
 font-weight: bolder;  
 color: #FFFFFF;  
 text-decoration: none;  
 margin-left: 10px;  
 font-family: "Arial", Courier;  
}  
  
  
  
#contentl{  
 background-image: url(images/contentlbg.PNG);  
 height: 509px;  
 width: 105px;  
 left: 0px;  
 top: 0px;  
}  
#contentl p{  
 font-size: 12px;  
 font-style: normal;  
 line-height: normal;  
 font-weight: normal;  
 color: #31312f;  
 text-decoration: none;  
 margin-left: 10px;  
 font-family: "Arial", Courier;  
}  
#contentl h1{  
 font-size: 13px;  
 font-style: normal;  
 line-height: normal;  
 font-weight: bolder;  
 color: #31312f;  
 text-decoration: none;  
 margin-left: 10px;  
 font-family: "Arial", Courier;  
}  
  
#contentl a{  
 font-size: 12px;  
 font-style: normal;  
 line-height: normal;  
 font-weight: bolder;  
 color: #31312f;  
 text-decoration: yes;  
 margin-left: 10px;  
 font-family: "Arial", Courier;  
}  
  
#contentr{  
 background-image: url(images/contentrbg.PNG);  
 height: 509px;  
 width: 588px;  
 left: 0px;  
 top: 0px;  
 margin-left: 184px;  
 margin-top: -50px;  
}  
#contentr p{  
 font-size: 12px;  
 font-style: normal;  
 line-height: normal;  
 font-weight: normal;  
 color: #31312f;  
 text-decoration: none;  
 margin-left: 0px;  
 font-family: "Arial", Courier;  
}  
#contentr h1{  
 font-size: 15px;  
 font-style: normal;  
 line-height: normal;  
 font-weight: bolder;  
 color: #31312f;  
 text-decoration: none;  
 margin-left: 0px;  
 font-family: "Arial", Courier;  
}  
  
#footer{  
 background-image: url(images/footerbg.PNG);  
 height: 24px;  
 width: 772px;  
 left: 0px;  
 top: 0px;  
}  
#footer p{  
 font-size: 12px;  
 font-style: normal;  
 line-height: normal;  
 font-weight: bolder;  
 color: #31312f;  
 text-decoration: none;  
 margin-left: 15px;  
 font-family: "Arial", Courier;  
}

Und hier die dazugehörige index.htm:

<!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>  
<title>..::Titel::..</title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<link href="style.css" rel="stylesheet" type="text/css" />  
<link rel="shortcut icon" type="image/x-icon" href="images/logo.ico">  
</head>  
<body>  
<div id="central">  
  
  
 <div id="header">  
 <p><br>Titel</p>  
 <h1>Untertitel</h1>  
 </div>  
  
  
 <div id="news">  
 <h1><br>News</h1><p>29.06.08: blablabla...</p>  
    </div>  
  
  
 <div id="contentl">  
 <h1><br>Menü</h1><br><a href="film.htm">blabla</a>  
  
  
  
 <div id="contentr"><h1><center>Blablabla<br><br><br><br><img src="images/p2.png"></center></h1></div>  
 </div>  
  
  
 <div id="footer"><p>©2008 by Tobias Engel</p>  
 </div>  
  
  
  
</div>  
</body>  
</html>

Die Lösung mit dem "contentr" margin-top=-50, also mit minus zu arbeiten ist nicht wirklich das was ich will...
Funktionieren würde es, aber ich habe immer noch den begrenzten Platz und wenn ich im Menü ein <br> mache, dann muss ich beim contentr wieder um 15pixel nach oben verschieben...

Ich hoffe jemand weiss hier eine Lösung...

Falls sich die Höhe beim content ändert, sollte dies sich beim menü auch tun, denn sonst würde dort der schwarze (oder fast schwarze) Hintergrund reinkommen...

  1. Ich hoffe jemand weiss hier eine Lösung...

    harte antwort: geht nicht

    man kann das problem aber umgehen - "faux columns" ist das stichwort

    1. hei,

      kann man auch ohne faux method die gleiche hoehe erreichen:

      http://gut.lv/beispiel/3divs.html

      Inita

      1. kann man auch ohne faux method die gleiche hoehe erreichen:
        http://gut.lv/beispiel/3divs.html

        ja, aber wenn dein hintergrund etwas mehr als eine farbe sind soll, klappts mit der border-methode nicht mehr so gut ;)