[XHTML/CSS]Probleempje met nesten van div's

[THiCE]

Hoi,

Het probleem is als volgt:

Ik heb een layout, waarbij op de onderste laag een div staat met een background, die op repeat-y staat, die tot de bodem van de pagina moet uitrekken.
Daarbovenop ligt een div met een background van een vaste hoogte.
Daar weer bovenop staat de content div.
Nu wil ik dus, dat de content div een 'child' is van de eerste div (met de repeat-y background), zodat de eerste div meerekt met de content.

Beetje code:

code:

<!-- de div met de main achtergrond, met het logo enzo -->
<div id="bg1">
    <!-- de div met de doorlopende achtergrond -->
    <div id="bg2"> 
        <!-- een transparante div, waarin alle content komt, bovenop de achtergrond div's -->
        <div id="content">
            Hier dan content
        </div>
    </div> 
</div>

En wat relevante CSS:

code:

/* De layer die de repeating background bevat */
#bg1 {
    border-left: 2px solid #9C1E8B;
    border-right: 2px solid #9C1E8B;
    background-image: url('images/bottom_bg.jpg');
    background-repeat: repeat-y;
    height: 100%;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    margin-top: 0px;
    z-index: 1;
}

/* De layer die de eenmalige achtergrond bevat */
#bg2 {
    border: 0px;
    background-image: url('images/main.jpg');
    background-repeat: no-repeat;
    width: 1000px;
    height: 600px;
    position: absolute;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
}

/* De grote content layer, hierin staan alle blokjes zoals menu enzo */
#content {
    width: 1000px;
    height: 100%;
    position: absolute;
    z-index: 3;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: auto;
}

Hoe zorg ik nou dat #content bepalend is voor de hoogte van #bg1? Want wat er nu gebeurt, is dat bg1 uitrekt tot 100% van het browserscherm, in plaats van de pagina...
Ik heb het idee dat het iets is met het nesten van de divjes, maar ik kom er niet uit wat het nou is... Weet iemand het wel?

[JHS]

#bg1 rekt uit tot de hoogte van het browserscherm omdat je 'em vertelt dat te doen . Height: 100%; betekend namelijk 100% van de hoogte van de container, wat in dit geval het browserscherm is. In principe rekken block level elementen gewoon vrolijk mee met de inhoud, dus als je de height properties weglaat gebeurt er gewoon wat je wil, mits je niet absoluut positioneert.

Dat doe je nu echter wel, waardoor ze uit de flow gehaald worden, en dus geen invloed meer hebben op de containing div. Tracht absoluut positioneren dan ook zoveel mogelijk te vermijden. Waarom gebruik je dat?

Overigens zou ik ook even kijken naar shorthands, alle margin properties die je nu opgeeft hebben hetzelfde effect als margin: 0 auto;. Ook hoef je heus niet steeds opnieuw de breedte op te geven, en dat centreren hoeft ook maar één keer te gebeuren. En waarom hang je de non-repeating background niet gewoon aan #content?

Ik zou er dus veel eerder zoiets van maken:

Cascading Stylesheet:

div#container {
    border-left: 2px solid #9C1E8B;
    border-right: 2px solid #9C1E8B;
    background-image: url('images/bottom_bg.jpg');
    background-repeat: repeat-y;
    margin 0 auto;
}

div#content {
    background-image: url('images/main.jpg');
    background-repeat: no-repeat;
    width: 1000px;
}