Container DIV groeit niet mee met binnenste DIV

13-06-2011 | Marcel van Langen | HTML, XHTML en CSS | css, stylesheet, styles, XHTML

Het gebruik van XHTML in combinatie met CSS is de de facto standaard. Zeker ontwikkelaars die gewend zijn aan op tabellen gebaseerde layouts vinden het vaak lastig om de overstap te maken. Eentje waar iedereen vroeg of laat tegenaan loopt is een probleem met een layout waarbij binnen een container DIV twee (of meer) kolommen in de vorm van floating DIVs zijn opgenomen.

Laten we in dit voorbeeld uitgaan van een pagina met een container DIV. Binnen de container DIV zijn twee kolommen geplaatst in de vorm van DIV's. De DIV's zijn met het FLOAT attribute tegen elkaar geplaatst. Dit lijkt in eerste instantie prima te gaan, maar het probleem wordt zichtbaar wanneer er content in een van beide kolommen wordt geplaatst. Dan wordt duidelijk dat de container DIV niet meegroeit met de inhoud van de beide kolommen. Dit is bijvoorbeeld zichtbaar wanneer de container DIV een achtergrondafbeelding heeft.

Er zijn eigenlijk twee oplossingen voor dit probleem. Eerste oplossing is om een zogenaamde clearing DIV als afsluiting in de container DIV te plaatsen, direct na de beide kolommen, maar dus nog wel IN de container DIV. Zorg er wel voor dat er een spatie is opgenomen in deze clearing DIV, anders begrijpt Mozilla het niet. Je kunt bijvoorbeeld het volgende opnemen:

<div style="clear: both;">&nbsp;</div>

of:

<br style="clear: both;" />

Zorg er natuurlijk wel even voor dat de opmaak niet je HTML vervuilt, maar plaats deze netjes in een CLASS en neem deze op in je CSS. Laat het duidelijk zijn dat ik geen voorstander ben van deze oplossing. Weliswaar werkt het, maar het vervuilt je (X)HTML met DIV's zonder inhoud. Er is gelukkig een tweede oplossing. Ervan uitgaande dat in je CSS de container DIV ook daadwerkelijk de class genaamd CONTAINER heeft meegekregen, werkt de volgende aanpassing aan je CSS:

#container
{
display: inline-block;
display: block;
overflow: hidden;
}

#container
{
display: block;
}

Zoals je kunt zien wordt de DIV als inline element geinstrueerd om zich te gedragen als een block element. Alle moderne browsers zien vervolgens in de overflow een instructie om mee te groeien met de binnenste of child floats. In de code is ook te zien dat CONTAINER twee keer wordt gedefinieerd. Dit is de enige manier om ervoor te zorgen dat Internet Explorer de instructies juist interpreteert.

Over Morloff

Morloff ontwerpt en realiseert succesvolle webtoepassingen op het gebied van procesoptimalisatie, eCommerce en rapportage door de inzet van moderne webtechnieken, sociale media en zoekmachine optimalisatie.

over ons | diensten | portfolio | contact | route

naar website IJsmonster.nl naar website ICT intermediairs naar website marcelvanlangen.com

Twitter

Morloff

Cuneraweg 169a
3911 RH Rhenen

M +31 (0)6 - 515 96 189
W www.morloff.nl
E contactformulier

Morloff op Twitter Morloff op Facebook Morloff op LinkedIn Morloff via RSS