[HTML/CSS] Hoogte relative div t.o.v. child-absolute div.

donderdag 20 september 2012 13:10

Acties:

0 Henk 'm!

Topicstarter

Hier zou een groet staan als dat mocht.

Om het probleem duidelijk te maken heb ik een testcase gemaakt. Te vinden op http://test.verdraaidgoed.nl/testcase.html

De code is:

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Testcase</title>
</head>
<body>
    <style>
        div {
            border: 1px solid black;
        }

        .relative {
            position: relative;
        }

        .absolute {
            position: absolute;
            margin: 20px;
            height: 50px;
            width: 50px;
        }
    </style>
    <div class="relative">
        <div class="absolute"></div>
    </div>
</body>
</html>

Om redenen die niet relevant zijn wil ik een absolute gepositioneerde div binnen een relative div. Dat kan. Het probleem waar ik tegenaan loop is dat de relative div wél de hoogte moet aannemen, dus alsof hij gevuld is.

Google leverde twee mogelijke oplossingen.
1) De relative div moet overflow:hidden meekrijgen. Helaas werkt dit alleen om floating divs te wrappen, het werkt niet bij absolute.
2) Na de absolute div moet een <div style="clear:both;" /> komen. Ook dit werkt alleen bij floating div's.

1) Probleem duidelijk?
2) Kan dit opgelost?
3) Hoe?

donderdag 20 september 2012 13:49

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Door position:absolute wordt het element "uit de document flow gehaald", wat heel simpel betekend dat de overige elementen zich niks meer van dat element aantrekken. Is eigenlijk geen oplossing voor; behalve de relative een vaste hoogte te geven of hoogte via Javascript instellen.

Misschien als je vertelt waarom je dit wil, dat we een andere oplossing kunnen vinden?

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

donderdag 20 september 2012 13:51

Acties:

0 Henk 'm!

418O2

binnen de absoluut gepositioneerde divs moet je een floatende div zetten met de styling.

http://www.alistapart.com/articles/css-positioning-101/

heb je die wel eens gelezen?

Ik twijfel overigens of je wel met absolute positionering moet willen werken. wat is (zoals hierboven genoemd) je doel?

[ Voor 25% gewijzigd door 418O2 op 20-09-2012 13:52 ]

donderdag 20 september 2012 14:20

Acties:

0 Henk 'm!

Thomzh

Topicstarter

Beiden bedankt voor de reactie. Javascript wil ik niet gebruiken voor layout, dus dan maar geen absolute.

Normaal probeer ik inderdaad absolute div's te mijden, maar dat leek nu niet mogelijk vanwege een ingewikkelde layout waarin ik met z-indices moet werken.

Nu blijkt dat in tweede instantie ook gewoon te kunnen met relative div's, dus het probleem bestaat niet meer. (Uiteraard probeerde ik het al met relative, maar dat werkte niet, geen idee meer waarom.)

@Catch22, goed artikel! De materie is natuurlijk redelijk bekend, maar dit zet de verschillen goed neer. (In tegenstelling tot veel andere websites/artikelen.)

donderdag 20 september 2012 15:32

Acties:

0 Henk 'm!

418O2

Positioning is ook een lastig verhaal en dat artikel is inderdaad een goed handvat om het even duidelijk te krijgen.

Onderwerpen