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

Pagina: 1
Acties:

Acties:
  • 0 Henk 'm!

  • WiNlUx
  • Registratie: April 2002
  • Laatst online: 12-09-2023
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:

Afbeeldingslocatie: http://www.hetvertier.nl/tweak/screenie-vertier.png

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

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#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?

Acties:
  • 0 Henk 'm!

  • WiNlUx
  • Registratie: April 2002
  • Laatst online: 12-09-2023
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:

Afbeeldingslocatie: http://www.hetvertier.nl/tweak/screenie-vertier-goed.png
Pagina: 1