2 Augustus 2009

Probleemstelling

We hebben meerdere div's in een div staan. De parent heeft een position. Daarbinnen bevinden zich div's met een position relative of absolute.

De parent zou toch tenminste de hoogte van alle relatieve div's moeten krijgen. Soms lijkt het of de parent wel de hoogte pakt van bijv. de eerste div. Maar soms valt de hoogte gewoon helemaal weg. Hoeveel we ook proberen in Firebug. We komen er niet uit.

Oorzaak: floating

Na een paar uur zoeken met een collega, ontdekten we eindelijk de oorzaak: floating div's. Inderdaad blijkt de overeenkomst overal dat er 1 of meer floatings div's waren. Die waren allemaal netjes gecleared. Dat is al een hele kunst om dat zonder extra html-tags te doen. Maar dat was niet voldoende om de hoogte van de parent mee te laten lopen.

De oplossing

Onderstaande artikelen hebben ons geholpen om de oplossing te vinden:

• http://www.positioniseverything.net/easyclearing.html
• http://gtwebdev.com/workshop/floats/enclosing-floats.php

We hebben voorlopig gekozen voor een simpele 'hack'.

De parent-div met daarbinnen floating-items krijgt de volgende style:

.classparent{
  float:none;
  clear:both;
  display:inline-block;
}

Verbijsterd

Ik ben echt wel in shock hierover. Het kost eerst al heel veel tijd en vervolgens moet is de oplossing tegen mijn principes. Het gedrag van de floats zou ook nog volgens w3c zijn. Want floats zweven dus boven de overige elementen. Worden blijkbaar uit de structuur gehaald. Het zal wel aan mij liggen, maar ik zie daar echt het nut niet van in.

Als rasecht web-programmeur ben ik natuurlijk tegen IE. Maar op dit punt moet ik ze gelijk geven. Versie 6 en mogelijk ook nog 7 (sorry, niet goed op gelet) negeren ook op dit punt de W3C-richtlijnen. En zorgen er wel voor dat de floats binnen hun eigen parent blijven, mits deze layout (hasLayout) heeft.

Tegen 'inline-block'

Een parameter als 'inline-block' is tegen mijn principes. Waarom?

Nou, het bepaald wat alle elementen in deze parent eruit zien. En zegt van zichzelf dat hij 'inline' is. Oftewel de parent-div is ineens geen block meer? Dat kan toch niet de bedoeling zijn?

Dat de binnenliggende items op 'block' worden gezet is op zich minder erg. Want het is beter om geen inline elementen direct in een div te zetten, al is dat wel toegestaan.

Block of inline op de float zelf?

Ik hoopte nog dat dat zou werken. Misschien hadden ze dat over het hoofd gezien ;-). Maar nee... ook stom om te denken dat je een guru kunt verbeteren ;-)

Het blijft erg vaag. Je zou toch echt denken dat als je de float zelf een display inline of block zou geven. Dan zou dat toch ook moeten werken. Misschien als de parent op inline gezet wordt, maar dat heb ik maar niet meer geprobeerd.