Nested div height

Door Raymond Veldhuizen op 10-12-2008 11:16

529 views

Hallo,

Ik gebruik onderstaand script met cSS (welliswaar even gestript voor de duidelijkheid). Nu is het de bedoeling dat de achtergrond van het menu een kleur krijgt. (mag ook herhalende afbeelding zijn) Deze moet tot aan de bodem van de container herhaald worden. Nu is het zo dat hij alleen een standaard meegegeven hoogte weergeeft.

Zodra de content langer is, zie ik dus een wit vlak in het menugedeelte. Is dit op te lossen via CSS?


<!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" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Website</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
#container {
    margin: auto;
    width: 1000px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: solid #666666;
    border-width: 0px 1px 1px 1px;
    overflow: auto;
}

#header {
    position: absolute;
    background-position: bottom;
    background-repeat: no-repeat;
    width: 1000px;
    height: 153px;
    z-index: 0;
}

#menu {
    position: absolute;
    width: 1000px;
    top: 198px;
}

.kolom {
    padding-left: 9px;
    text-align: left;
    vertical-align: top;
    float: left;
    width: 24%;
}

.contentkolom {
    text-align: left;
    vertical-align: top;
    float: left;
    padding-left: 10px;
    padding-right: 8px;
    width: 48%;
}
</style>
</head>

<body>
<div id="container">
    <div id="header"></div>
    <div id="menu"></div>     
    <div class="kolom">Hier komt een menu</div>
    <div class="contentkolom">Hier komt content met variabele lengte</div>
    <div class="kolom">Hier komen banner e.d. te staan</div>
</div>
</body>
</html>