Absolute/relative positioning

[George]

Probleem waar ik al lang mee worstel:

Stel je hebt 2 DIVs: outerDiv en innerDiv. Hieronder bevind zich een floatDiv (float of gewone div, maakt voor de testcase niet uit).

HTML:

<div class="outerDiv">
    <div class="innerDiv>
    </div>
</div>

<div class="floatDiv">

</div>

Wat ik wil verkrijgen is het volgende. De innerDiv moet absoluut gepositioneerd worden, met als referentie punt de outerDiv. Dit bereiken we door de volgende CSS code:

Cascading Stylesheet:

.outerDiv {
    width: 100px;
    height: auto;
    background-color: #99FF00;
    position: relative;
}

    .innerDiv {
        width: 50px;
        height: auto;    /* Hypothetisch is innerDiv.style.height > outerDiv.style.height */
        background-color: #CCCCFF;
        position: absolute;
        top: 0px;
        left: 0px;
    }

floatDiv {
    width: 100px;
    height: 50px;
    float: left;
    background-color: #FFCC00;
}

Wat ik nu zou willen, is dat wanneer innerDiv in hoogte toeneemt, de outerdiv meegroeit. De floatDiv wordt dan gewoon omlaag geduwd afhankelijk van de content in innerDiv. Dit is normaal gedrag bij height: auto, maar NIET wanneer de innerDiv dus absoluut is gepositioneerd. De outerDiv groeit dan niet mee, daar innerDiv absoluut is gepositioneerd en dus buiten de regulier flow van het document valt.
Ik heb tot op heden hier nog geen oplossing voor weten te vinden (met CSS).

Iemand ideeën ?

Mijn idee omvat geen CSS, maar javascript. Dus hoogte van innerDiv uitlezen en die vervolgens naar de outerDiv gooien. Maar dan komt er dus weer javascript bij kijken. Is er een 'schone' manier met CSS ?

Alvast bedankt als je de moeite genomen hebt om de code te bekijken.

[ Voor 29% gewijzigd door George op 11-03-2006 01:13 ]

[disjfa]

Geen absolute positionering gebruiken. Is absoluut 99% van de keren nergens voor nodig.

[George]

Dat is wegrennen voor een probleem

In de module waar ik nu mee bezig ben layer ik verscheidene divs over elkaar heen. Ze zijn elk van verschillende grootte. Afhankelijk van een selectie laat je een bepaalde divs al dan niet verschijnen. Vandaar de keuze voor absolute positioning. Anders moet ik relative pakken, maar de negatieve verplaatsing kun je dan alleen bepalen wanneer je vantevoren weet hoe groot het vorige element in de document flow is. Wat dus niet het geval is.

[disjfa]

Dan kan je beter met een display:none werken aangezien dan de elementen niet gerendert worden in de versie die je laat zien.

Wegrennen voor absoluut gepositionering is niet wegrennen, dat is meer een hulpmiddel.

[George]

Klopt, wanneer je display: none hebt vallen die buiten de gerenderde flow. Maar wanneer je dus verschillende divs gelaagd hebt (en tegelijkertijd zichtbaar)gaat dat niet op.

Overigens, dit is een meer een hypothetische vraag dan een praktische. Wil gewoon weten of er een schone manier is.

[disjfa]

Die is er zo ver ik weet niet. Van absoluut gepositioneerde div`s zonder dat je weet wat voor inhoud je hebt kan je bijna geen hoogte gaan opvragen aangezien de browser dit nooit zal kunnen uitrekenen.

Dus tenzei de vlakken een vaste hoogte hebben kan je het vergeten.

[Verwijderd]

Dat wil ik ook wel wten hoe je dan doe outerdiv kan mee laten groeien... Iemand?

[George]

Normaal heb je inner en outerdiv. Beide hebben als height: auto bijvoorbeeld. Dan groeit de outerdiv automatisch mee. Wanneer de innerdiv een float is gebeurt dit niet, dat kun je dan verhelpen door of overflow: auto mee te geven aan de outerdiv, of eventueel door een element onder de innerdiv te plaatsen met als attribuut clear: both;

[JHS]

Height: auto; helpt iniedergeval niet:

quote: http://www.w3.org/TR/2004.../visudet.html#root-height

Absolutely positioned children are ignored,

.