Archief - xHTML/CSS: Firefox en Opera negeren height bij floats.

Ik was net bezig met het slicen van deze website toen ik weer op een voor mij welbekend probleem stootte. De containerdiv wou niet meerekken met de content die erbinnenstond omdat ik op die content float gebruikte.

Om het even te illustreren:

Zonder die floats zou de containerdiv dus perfect groter en kleiner worden naargelang de content van left- en rightdiv. Met de floats included is het ermee gedaan (Daarstraks ook even dit voorbeeldje gemaakt met énkel de basic code van zo'n structuur).

Nu, ik kom dit probleem al tegen ever since ik met divs werk, het is simpel op te lossen, zet de volgende code net vóór de sluittag van de div die moet uitrekken:

<span style="display: block; line-height: 0; clear: both;">&nbsp;</span>

En normaal deed ik dit ook altijd in de vorm van een footer (zonder de line-height en in de vorm van een div ipv een span dan natuurlijk) maar met de opbouw van deze site gaat dat niet.

Mijn vraag nu: Is er geen nette manier om dit probleem op te lossen? Of zal ik echt met bovenstaande oplossing moeten gaan werken?

Ik kan gewoonweg niet begrijpen hoe zoiets simpels mis kan lopen. Opera legt de ACID2 test foutloos af? Hoe kan hij dan die nesting niet correct interpeteren? Check mijn code maar, volgens mij is ze volledig juist en zou het er dus moeten uitzien zoals in Internet Explorer 6 en 7. (click for screenshot)

Opera en Firefox renderen de pagina juist. Een element met float eigenschappen wordt uit de normale flow genomen, waardoor het niet meer zal bijdragen tot het berekenen van de hoogte van de container. Op Smashing Magazine is net een handig artikel over floating verschenen: Css Float Theory: Things You Should Know.

De methode die ik meestal gebruik is inderdaad ofwel het toepassen van een "clear: both" op de "footer", ofwel, bij afwezigheid van zo een element, het toepassen van "overflow: hidden" op de container.

klopt @ hierboven. Wordt niet fout gerendered door FF, noch door Opera .
"Oplossing"? Zou eenvoudig moeten zijn:

:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}

Gezien IE het toch verkeerd rendert, is er voor IE geen "oplossing" nodig deze keer .

Nuja, ik vind het toch maar een onlogische manier van denken. Maar misschien verandert dat nog als ik het artikel van SM gelezen heb.

Maar toch, als ik dat dan lees vind ik het vrij vreemd om nog floats te gebruiken om uw elementen te positioneren (hell, om eender wat te doen ermee). Zou het dan niet gemakkelijker zijn voor ons allemaal om toch met relatieve positionering te werken?

Bedankt voor de replies alleszins.


Edit: Die overflow techniek is echt wel perfect El73, raar dat die eigenschap daar zo'n invloed op uitoefent.

gaat die overflow er ook niet voor zorgen dat de scrollbar het element niet meer mee in rekening neemt? ik gebruik zelf altijd de clearfix methode (die xavez al aanhaalde). je hebt eigenlijk daarbij geen "volgend element" nodig dat enkel "clear:both;" zal toepassen want je zet het gewoon op de container-div die tekst/beeld bevat. (hij rendert eigenlijk een puntje aan het einde van de tekst waarbinnen floats zitten, maar je ziet dat puntje niet omdat het hidden staat)

Blijkbaar niet Lunchbox, heb het ondertussen zelf al uitgetest (http://www.refuel.be/Ontwerp/Refuel_HTML/) en het zorgt er gewoon voor dat alle browsers erop gaan reageren als Internet Explorer.