Container DIV rekt niet mee (al heel veel dingen geprobeerd)

[WiNlUx]

Ik ben bezig met een website, bestaande uit alleen maar DIV's.

Nu ben ik al erg goed op weg, alleen zit ik met een probleem. De container DIV krijg ik niet meegerekt terwijl de andere DIV's dat wel doen!

Hier een voorbeeld:



Mijn CSS van die 3 DIV's ziet er zo uit:

code:

#container {
    width: 920px;
    min-height: 876px;
    margin: auto;
    background-image: url(../img/containerbg.png);
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #5d4a29;
    border-bottom-color: #5d4a29;
    border-left-color: #5d4a29;
}

#contentcontainer {
    width: 900px;
    margin-bottom: 10px;
    background-color: #fdeddd;
    margin-top: -29px;
    margin-right: 10px;
    margin-left: 10px;
    border: 1px solid #d8c9a5;
    position:absolute;
}

#content 
{
    float: left;
    border: 1px solid #d8c9a5;
    width: 546px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    background-color: #f2e5c5;
    font-family: Arial, Helvetica, sans-serif;
    color: #5d4a29;
    text-decoration: none;
    font-size: 13px;
    padding-left: 17px;
    padding-top: 16px;
    padding-right: 17px;
    padding-bottom: 16px;
}

Mijn vraag:

Hoe kan het zo zijn dat de #contentcontainer div wél meerekt, maar de #container div níet?

De #container heb ik al een "height: 100%" meegegeven, maar dat werkt niet. Als ik de height en min-height weglaat, rekt ie ook niet mee... Hoe kan dit, zie ik wat over het hoofd?

Bij #content moet de "float: left;" blijven staan, omdat rechts ervan ook nog een menu komt (dit heb ik al getest en werkt perfect).

Als ik bij #contentcontainer "position: absolute;" weghaal, en bij #content "float: left;", dan rekt de #container wel mee. Maar dan kan ik weer geen menu langs #content zetten...

Heb me rot gezocht op google, maar dat leverde weinig op na veel proberen. Ook hier weinig over gevonden.

Wie o wie kan mij helpen?

[console]

overflow:hidden; op je container zou moeten werken.

[ Voor 29% gewijzigd door console op 12-10-2010 17:15 ]

[WiNlUx]

console schreef op dinsdag 12 oktober 2010 @ 17:11:
overflow:hidden; op je container zou moeten werken.

Dit heb ik gedaan, maar ik krijg hetzelfde resultaat. #container DIV rekt niet mee...

[rubenvanvliet]

Ik kan het zo niet heel goed zien, maar volgens mij moet je clearfix toepassen op #contentcontainer

[Verwijderd]

Position absolute en "flow" gaan niet samen.

[Matis]

Volgens mij ben jij op zoek naar CSS: clear

http://www.w3schools.com/css/pr_class_clear.asp

[MsG]

Dit legde het voor mij toentertijd goed uit: http://www.quirksmode.org/css/clearing.html

[WiNlUx]

Zo. Ik heb het opgelost.

Zoals KIPMANS zei, flow en position: absolute gaan niet samen. Zodoende heb ik die position absolute weggehaald bij #contentcontainer, en aan #container en #contentcontainer "overflow: hidden;" toegevoegd.

Nu heb ik het volgende resultaat: