Div stretch door div content

[Anoniem: 63444]

Beste Tweakers,

Ik zit al een tijdje rond te speuren voor een oplossing voor het volgende probleem:



In mijn situatie heb ik een rode 'container' div met daarin een for loop die een lijst met div's met content bouwt. Het probleem is alleen dat de rode 'container' div (linker voorbeeld) niet meestretch met de content. De bedoeling is dat de div er zoals rechts uit komt te zien.

Ik heb al meerdere oplossingen geprobeerd en zit nu met de volgende code:

code:

<div class=centermiddle>
  *forloop start
   <div class=list>$i</div>
  $forloop end

</div>


.centermiddle {
position:relative;
margin: 0 auto;
min-height:900px;
width: 990px;
}

/* firefox - content stretch fix*/
.centermiddle:after {
content: ".";
display: block;
height: 900;
clear: both;
visibility: hidden;
}
/**/

.list {
position: absolute;
height:30px;
width:900px;
}

De firefox stretch zorgt er wel voor dat de DIV meebeweegt met html content. Maar met DIV's werkt het niet. Heeft iemand hier een oplossing voor?

[Voor 7% gewijzigd door Anoniem: 63444 op 10-05-2011 21:00]

[Flowmo]

position:absolute is hier de boosdoener. Dat is de oorzaak dat de div niet meestretcht omdat die div geen rekening houdt met de hoogte van de gepositioneerde inhoud. Haal die regel weg en positioneer je inhoud dmv padding en/of margin.

Edit: en die firefox stretch is nergens voor nodig. Die wordt voornamelijk voor floats gebruikt, terwijl in de meeste gevallen een clear div of overflow:visible ook volstaat.

[Voor 27% gewijzigd door Flowmo op 10-05-2011 19:57]

[Anoniem: 63444]

Flowmo schreef op dinsdag 10 mei 2011 @ 19:56:
position:absolute is hier de boosdoener. Dat is de oorzaak dat de div niet meestretcht omdat die div geen rekening houdt met de hoogte van de gepositioneerde inhoud. Haal die regel weg en positioneer je inhoud dmv padding en/of margin.

Edit: en die firefox stretch is nergens voor nodig. Die wordt voornamelijk voor floats gebruikt, terwijl in de meeste gevallen een clear div of overflow:visible ook volstaat.

Daar had ik ook al aan gedacht. zonder de positionering absolute en zonder het gebruik maken van de top: en left: keywords vallen de div's nog altijd buiten de moeder div. Overflow:visible is standaard en volstaat hier helaas dus ook niet.

Hebben andere mensen nog tips?

[Acid_Burn]

Ik zie eigenlijk niet in waarom je absoluut moet positioneren.
Al die listitems elk een div zonder opsmuk geeft toch gewoon het juiste resultaat?

[F.West98]

haal de vaste height weg, iig elke vorm van height, zou volgens mij moeten werken. (en elke position, ook relative)

[Anoniem: 63444]

Acid_Burn schreef op dinsdag 10 mei 2011 @ 20:57:
Ik zie eigenlijk niet in waarom je absoluut moet positioneren.
Al die listitems elk een div zonder opsmuk geeft toch gewoon het juiste resultaat?

Ik hoef ook niet absoluut te positioneren. Maar zonder positionering vallen de Div's ook buiten de moeder div. Zonder positionering kan ik ze ook goed plaatsen, maar dan vallen ze dus nog steeds buiten de moeder div

[MsG]

Ook zonder floats? Dan doe je iets fout. Anders moet je je floats clearen.

[Anoniem: 63444]

F.West98 schreef op dinsdag 10 mei 2011 @ 20:58:
haal de vaste height weg, iig elke vorm van height, zou volgens mij moeten werken. (en elke position, ook relative)

Er moet een minimale height in, als de list maar klein is (wat afhankelijk is van meerdere filters) moet div i.i.g. uit 900pix bestaan

[Acid_Burn]

http://temp.theglasseye.nl/got/test.html

Ik zie het probleem niet zo. Ik heb dan alleen even hard die divs erin gezet ipv met een loopje.

[mcDavid]

Het gebruik van een div met class "list" klinkt een beetje als diveritus, maar afgezien daarvan: wat jij beschrijft is gewoon standaard gedrag. Als dat niet werkt heb je het zelf (onbewust) gesloopt. Begin dus eens met een kale testcase en kijk wanneer het mis gaat.

[Dark Blue]

mcDavid schreef op donderdag 12 mei 2011 @ 20:22:
Het gebruik van een div met class "list" klinkt een beetje als diveritus, maar afgezien daarvan: wat jij beschrijft is gewoon standaard gedrag. Als dat niet werkt heb je het zelf (onbewust) gesloopt. Begin dus eens met een kale testcase en kijk wanneer het mis gaat.

Bedoel je dat hij dan beter een UL of een OL had kunnen gebruiken? Ligt een beetje aan de content, maar ja, als je het ding al list noemt, begin ik me ook af te vragen of een list-element dan niet passender zou zijn. Voor de browsers en zoekmachines die het moeten interpreteren, dan vooral.

Niet dat dat je probleem oplost.

Ik ga met de anderen mee dat je je geloopte divs niet absoluut moet positioneren. Geef ze een position: relative mee en handel de positie binnen de moederdiv af met margins aan de list of met paddings aan de moederdiv. Bij voorkeur de eerste, want paddings zijn nog wel eens brutaal en duwen je moederdiv uit z'n voegen (in de ene browser wel, in de andere browser niet).

[Anoniem: 156868]

Alle positions en vaste hoogtes weggooien en float's gebruiken, gaat een stuk beter dan

Dark Blue schreef op zondag 15 mei 2011 @ 18:53:
[...]
Bij voorkeur de eerste, want paddings zijn nog wel eens brutaal en duwen je moederdiv uit z'n voegen (in de ene browser wel, in de andere browser niet).

En dat.
Paddings gebruik ik nog zelden, vanwege traumatische IE6 ervaringen Meestal zet ik een zogenaamde 'inner' div neer die margin heeft om ze de boel te positoneren…

[Voor 71% gewijzigd door Anoniem: 156868 op 17-05-2011 21:01]