[CSS] omliggende div's vergroten niet mee

[coenbijlsma]

Ik heb een pagina gebouwd met een aantal geneste divs, die dmv een css gepositioneerd worden. Links het menu, rechts wat linkjes, en in het midden een overzicht van een aantal producten. Onder dit alles een footertje met wat info over mij.

Het aantal producten is niet beperkt. Als ik dus veel producten in de database heb staan, loopt die div in het midden nogal uit, en krijg je zoiets:

plaatje

Ik heb al gezocht op css positioning, maar volgens mij zit ik daar verkeerd te zoeken.
Wat er volgens mij gebeurt is dat de div's links, rechts en onder de middelste niet meegroeien.
Ik heb nu een tijdelijke oplossing gemaakt door de hoogte absoluut in te stellen, maar het moet uiteindelijk zo zijn dat de omliggende div's gewoon meegroeien.

Voor de volledigheid nog even de relevante css-code:

Heeft iemand een idee hoe ik dit op kan lossen of waar ik naar moet zoeken?

Cascading Stylesheet:

body {
    font-family:"Times New Roman", Times, serif;
    font-size:90%;
}

/*pagecontent zit om alle ander divs heen gewrapped.*/
div.pagecontent {
    position:absolute;
    top:0px;
    left:10%;
    right:10%;
    height:110%;
    
    border-bottom:none;
    border-top:none;
    border-left:none;
    border-right:none;
}

/*De header met een leuk plaatje*/
div.header {
    position:absolute;
    top:0px;
    height:103px;
    width:100%;
    
    background-image:url(../img/header_fill.jpg);
    background-repeat:repeat-x;
    background-position:top;
    
    border-left:none;
    border-right:none;
    border-top:none;
    border-bottom:none;
}

div.header img {
    position:absolute;
    left:150px;
}

/*het middengedeelte*/
div.content {
    position:absolute;
    top:103px;
    left:17%;
    /*bottom:7%;*/
    width:66%;
    
    padding-left:5px;
    padding-right:5px;
    
    overflow:hidden;
}

div.menu {
    position:absolute;
    top:103px;
    /*bottom:7%;*/
    height:800px;
    left:0%;
    width:17%;
    
    background-image:url(../img/ov_grijs_groen.gif);
    background-repeat:repeat-x;
    border-color:#999999;
    border-bottom:none;
    border-top:none;
    border-left-width:1px;
    border-left-style:solid;
    border-right-width:1px;
    border-right-style:solid;
    
    text-align:left;
}

div.leukelinkjes {
    position:absolute;
    top:103px;
    /*bottom:7%;*/
    height:800px;
    right:0%;
    width:17%;
    
    border-color:#999999;
    border-bottom:none;
    border-top:none;
    border-right-width:1px;
    border-right-style:solid;
    border-left-width:1px;
    border-left-style:solid;
    
    text-align:left;
}

div.footer {
    position:absolute;
    top:903px;
    bottom:0%;
    left:0px;
    right:0px;
    
    border-color:#999999;
    border-bottom:none;
    border-right-width:1px;
    border-right-style:solid;
    border-left-width:1px;
    border-left-style:solid;
    border-top-width:1px;
    border-top-style:solid;
    
    color:#666666;
    font-size:75%;
    text-align:center;
}

[Zoefff]

Je positioneert alles absoluut (waarom ), dus geen enkele div zal zijn parent oprekken omdat je ze allemaal uit de flow haalt. Probeer altijd zo weinig mogelijk absoluut te positioneren. Dit is "gewoon" een 2- of 3-column layout die (eventueel met faux-columns) zonder absolute positionering te maken is.

Iets heel anders, voeg eens wat CSS samen!

Cascading Stylesheet:

    border-bottom:none;
    border-top:none;
    border-left:none;
    border-right:none; 

of

    border-color:#999999;
    border-bottom:none;
    border-right-width:1px;
    border-right-style:solid;
    border-left-width:1px;
    border-left-style:solid;
    border-top-width:1px;
    border-top-style:solid; 

kan je veel sneller (en overzichtelijker) schrijven als resp.

Cascading Stylesheet:

    border: 0;

en

    border: 1px solid #999;
    border-bottom: 0;

[coenbijlsma]

ow.. dat wist ik niet, maar ik zal het aanpassen. Ik ga ook even proberen met het positioneren, geboekte resultaten vermeld ik hier even