5 berichten aan het bekijken - 1 tot 5 (van in totaal 5)
  • Q:
    Inactief
    Anoniem

    [CSS] Hoogte relative div aanpassen aan absolute div’s erin

    Ik heb de volgende situatie:
    [code:1:c685cbe45d]
    <div id="div1" style="position:relative; float:left">
    <div id="div2" style="position:absolute; top:0; left:0">
    tekst
    </div>
    <div id="div3" style="position:absolute: top:0; left:0">
    tekst
    </div>
    </div>

    <div id="div4" style="clear:both; position:relative; float:left">
    footer
    </div>
    [/code:1:c685cbe45d]

    In plaats van dat div4 ONDER div1 komt te staan OVERLAPPEN beide elkaar. Dit omdat div1 hoogte en breedte 0 heeft. Ik wil dat de hoogte en breedte van div1 zich aanpassen aan de afmetingen van div2 of div3 (al naar gelang welke het grootst is). De afmetingen van div2 en div3 zijn heel verschillend, dus ik wil niet expliciet een hoogte meegeven aan div1 (middels height:…px).

    Kan dit? Hoe moet dit?

    Bijdrager
    madmax

    Wellicht is dit op te lossen door een ‘cleared break’ toe te voegen voordat je div1 afsluit:

    [code:1:9b55ea12f6]
    <div id="div1" style="position:relative; float:left">
    <div id="div2" style="position:absolute; top:0; left:0">
    tekst
    </div>
    <div id="div3" style="position:absolute: top:0; left:0">
    tekst
    </div>
    <br style="clear:both;float:none;" />
    </div>

    <div id="div4" style="clear:both; position:relative; float:left">
    footer
    </div> [/code:1:9b55ea12f6]

    nog netter: <br class=”clr” /> met in je CSS de bijbehorende class en properties.

    Inactief
    Anoniem
    ”madmax”

    Wellicht is dit op te lossen door een ‘cleared break’ toe te voegen voordat je div1 afsluit…

    Dit werkt wel in bovenstaande voorbeeld. In welkelijkheid is m’n situatie iets anders en daarin werkt het niet. Maar dat ligt dus waarschijnlijk ergens anders aan. Ik ga nog even verder puzzelen. Bedankt iig!

    Bijdrager
    madmax

    Zoiets dan (sorry niet echt netjes, maar ik heb niet veel tijd):

    [code:1:0977e68560]
    <html>
    <head>
    <style>
    #wrap, #footer {
    width: 90%;
    margin: 0 auto;
    position: relative;
    }
    #links, rechts {
    width: 50%;
    float: left;
    }
    .clr {
    clear:both;
    float:none;
    }
    </style>
    </head>
    <div id="wrap">
    <div id="links">links links links links links links links links links links links links links links links links links links links links links links links links links links links links links links links links links links links links links links </div>
    <div id="rechts">rechts rechts rechts rechts rechts rechts rechts rechts rechts </div>
    <br class="clr" />
    </div>

    <div id="footer">footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer</div>
    </body>
    </html>
    [/code:1:0977e68560]

    Inactief
    Anoniem
    ”madmax”

    Zoiets dan (sorry niet echt netjes, maar ik heb niet veel tijd):

    Sorry. Ik dacht eerst dat je eerder aangedragen oplossing niet werkte, maar die werkt wel. Heb reactie inmiddels aangepast. Ik denk dat er waarden worden overnomen van een hogere div waardoor het niet werkt. Hier ga ik nog even verder mee puzzelen. Bedankt iig!

5 berichten aan het bekijken - 1 tot 5 (van in totaal 5)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.