AbonnerenGebruik van lege cleardiv, JA
Gepost in: Experimenten
Op dagelijkse basis ben ik sinds kort zwaar actief met XHTML en CSS. Voorheen was dit regelmatig, maar sinds ik bij Reclamebureau Connexx werk is dit aan de lopende band. Voor de gevordere websitebouwer is veel kant en klare koek, maar ik probeer in veel gevallen het nog wat begrijpelijker uit te leggen.Lege clear div gebruiken?
Ik kwam de laatste tijd verschillende berichten tegen die vertelde om in de code van een website geen clear div te gebruiken. Een stukje code om alle browsers (Bijv. Internet Explorer en Firefox) te 'zeggen' hoe hoog een stukje van de website moet worden als de hoogte dynamisch is.Nu dacht ik, verrek dat klopt inderdaad, nog bedankt Timothy. Dat kan zo ook ja. Maar toch...bij mij blijkt het niet te werken.
Ik heb in mijn nieuwste project van Muziekschool Musicas (nog in aanbouw dus) dus weer liggen stoeien. En toch krijg ik het niet gedaan met de mogelijkheden die bijvoorbeeld Timothy van Sas geeft op zijn weblog over het gebruik van lege clear div's. Ik heb beide mogelijkheden geprobeerd die hij geeft, maar in Firefox gaat het niet goed met de margin-top van de divider. Deze geeft hij alleen als er een lege clear div gebruikt wordt. Te zien aan de zwarte border die niet om het gehele element .container te zien is.
Mijn vraag is dan ook...why? Hieronder zie je beide voorbeelden. De eerste mogelijkheid is zonder de lege clear div en je ziet dat de divider (Het onderste grijze scheidingselement in dit geval) tegen de 2 kolommen aan zit.
De tweede mogelijkheid is het gebruik MET een lege clear div en je ziet dat de divider 10px onder de 2 kolommen zit. De zwarte border geeft de hele tijd mooi aan of Firefox weet hoe hoog het element is wat in het .container element zit.
Hoe kan dit? Mijn vraag is aan alle XHTML/CSS professionals, waarom iedereen zegt dat je ze niet moet gebruiken, maar in dit geval het in mijn ogen niet anders kan.
Hoor graag van jullie.
Reacties op 'Gebruik van lege cleardiv, JA' (6)
Door: Marc op zondag 9 November 2008 18:13
Hey Mike,
Je moet ze eigenlijk niet gebruiken omdat een lege div nutteloze informatie is. Er staat immers niks tussen. (Ik gebruik ze trouwens zelf wel maar snap de logica waarom je ze niet moet gebruiken).
Als je oplet in het filmpje van Timothy dan zegt hij dat je de clear:both; op een element moet zetten dat onder je objecten komt zoals in zijn geval de footer.
Wat gebeurt er als jij op je .divider de class zet werkt het dan wel?
---------
Persoonlijk vind ik het gebruik van een div met de class clearboth geen probleem. Het werkt immers prima. Google heeft er geen last van, het is in alle browsers geaccepteerd (dus geen hack) en het werkt overzichtelijk. Het enige nadeel dat ik kan bedenken is het aantal bytes dat het extra kost om dit telkens te herhalen.
Mocht het over een tijdje niet meer door mijn validator heenkomen dan ga ik het natuurlijk anders proberen maar zolang dit niet het geval is gebruik ik ze lekker.
// Marc
Je moet ze eigenlijk niet gebruiken omdat een lege div nutteloze informatie is. Er staat immers niks tussen. (Ik gebruik ze trouwens zelf wel maar snap de logica waarom je ze niet moet gebruiken).
Als je oplet in het filmpje van Timothy dan zegt hij dat je de clear:both; op een element moet zetten dat onder je objecten komt zoals in zijn geval de footer.
Wat gebeurt er als jij op je .divider de class zet werkt het dan wel?
---------
Persoonlijk vind ik het gebruik van een div met de class clearboth geen probleem. Het werkt immers prima. Google heeft er geen last van, het is in alle browsers geaccepteerd (dus geen hack) en het werkt overzichtelijk. Het enige nadeel dat ik kan bedenken is het aantal bytes dat het extra kost om dit telkens te herhalen.
Mocht het over een tijdje niet meer door mijn validator heenkomen dan ga ik het natuurlijk anders proberen maar zolang dit niet het geval is gebruik ik ze lekker.
// Marc
Door: Dave op zaterdag 22 November 2008 12:58
Hoi Mike,
Die lege divjes zijn inderdaad niet nodig. Het probleem is het feit dat je de 2 kolommen 'float'. Daarmee haal je ze 'uit de flow' van je document en de 'container' div 'ziet ze dus niet meer' als 'kinderen' (zeg maar). Daardoor klapt de container div dicht (net alsof er niets in staat). Doordat de container div dichtklapt zie je dus zijn zwarte border als 1 streep (ingeklapte borders).
Wat je moet doen, is zorgen dat je container div opnieuw 'herkent' dat er wel degelijk 2 kolommen inzitten. Dan zal de container div de hoogte aannemen van zijn hoogste kolom.
Er is al veel geschreven over hoe je dat kan doen. Google maar eens op "Clearing Divs withut extra markup" ofzo. Ikzelf gebruik al een poosje de 'easy clearing' "clearfix" methode van Position Is Everything, simpel wat extra CSS en een extra 'clearfix class op je container.
Maar welke oplossing gebruikt hangt ook af van welke browsers je wilt ondersteunen, hoe belangrijk validatie voor je is, etc. Lees hier meer: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
Die lege divjes zijn inderdaad niet nodig. Het probleem is het feit dat je de 2 kolommen 'float'. Daarmee haal je ze 'uit de flow' van je document en de 'container' div 'ziet ze dus niet meer' als 'kinderen' (zeg maar). Daardoor klapt de container div dicht (net alsof er niets in staat). Doordat de container div dichtklapt zie je dus zijn zwarte border als 1 streep (ingeklapte borders).
Wat je moet doen, is zorgen dat je container div opnieuw 'herkent' dat er wel degelijk 2 kolommen inzitten. Dan zal de container div de hoogte aannemen van zijn hoogste kolom.
Er is al veel geschreven over hoe je dat kan doen. Google maar eens op "Clearing Divs withut extra markup" ofzo. Ikzelf gebruik al een poosje de 'easy clearing' "clearfix" methode van Position Is Everything, simpel wat extra CSS en een extra 'clearfix class op je container.
Maar welke oplossing gebruikt hangt ook af van welke browsers je wilt ondersteunen, hoe belangrijk validatie voor je is, etc. Lees hier meer: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
Door: Mike van hoenselaar op dinsdag 25 November 2008 21:38
Ik heb het gevonden. Het is height:1%; overflow:hidden;display:block op de container div zetten.
Er zijn vast nog meer mogelijkheden, maar dit werkt voor mij prima.
Er zijn vast nog meer mogelijkheden, maar dit werkt voor mij prima.
Door: Wolf op zaterdag 24 Januari 2009 19:31
Ik gebruik sinds jaar en dag een lichtjes opgekuisde versie van de Clearfix ( http://www.positioniseverything.net/easyclearing.html )
Door: Peter op zondag 2 Oktober 2011 21:48
Bedankt voor de goede uitleg van de css. Kan ik mee verder