Basisbenadering
Grote apparaten, kleine apparaten, soms wil je alle HTML in div-elementen gieten, op een manier dat wanneer iets wat rechts niet op je scherm(pje) past automatisch naar onder rolt... Of juist niet natuurlijk.
Vaak kun je ctrl-u gebruiken om de code van html, dit document dus, te bekijken. De stijlen zijn ook gedefinieerd in dit bestand dus je hebt een goed voorbeeld. De stijl-informatie staat ook in de tekst hierna.
Hoe gedragen twee divs zich?
Twee divs achter elkaar, dat is makkelijk, ze rollen, wrappen, altijd onder elkaar.
Dit is div 1 (zie stijl .div1) met achtergrond lichtrood. Style: .div1 { background-color: #ff8888; }
Dit is div 2 met achtergrond lichtgroen. Style: .div1 { background-color: #88ff88; }
Twee divs in div container1
Hetzelfde maar dan in een container1.
This is div container1. Style: .container1 { padding: 10px; background-color: #8888ff; }
This is div 1. Style: .div1 { background-color: #ff8888; }
This is div 2. Style: .div1 { background-color: #88ff88; }
Dito zonder wrap
Nu met zowel div3 als 4 in container2, geen wrapping. Style container2 bevat "display: inline-block;" en dat zorgt ervoor dat de divs achter elkaar door vloeien. Iets wat je wil, of juist niet. Maar deze constructie is uiterst handig om kleine schermen te vullen met divs die, als ze niet passen, gewoon onder elkaar vallen, waardoor alles toch leesbaar blijft. Anders gezegd: Responsive coding met minimale code. Verander dit scherm in de breedte en of zoom in en uit en zie hoe alles schuift.
This is div container2. Style: .container2 { display: inline-block; padding: 10px; background-color: #8888ff; }
This is div3 and some text.
Style: .div3 { display: inline-block; background-color: #ff8888; }
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is div4 and some text.
Style: .div4 { display: inline-block; background-color: #88ff88; }
Morbi ut dolor vel erat rhoncus euismod ut eu risus.
Een afbeelding toevoegen
Gewoon toevoegen
Wat gebeurt er als we een afbeelding gewoon achter de tekst zetten?
Dit is div container2 met een logo met width=100 en height=200. Style: .container2 { display: inline-block; padding: 10px; background-color: #8888ff; }. Het veroozaakt veel ruimte boven en onder de afbeelding. Nu volgt de img-tag. Style: .imgr {float: right; border: 2px dotted red; margin: 0px 0px 10px 10px;}... 
Deze tekst is toegevoegd na de img-tag. Echter, het wordt overruled door de stijl van .imgr, "float: right;".
Bij het veranderen van de breedte van het venster kun je zien dat de ruimte ervoor zorgt dat de volgende div wrappen, onder elkaar komen. Als je er goed over nadenkt dan is dit logisch.
Dit is div3 met wat tekst. Style: .div3 { display: inline-block; background-color: #ff8888; }
Met height=50 zorgt het ervoor dat width=100 wordt overruled.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Dit is div4 met wat tekst. Style: .div4 { display: inline-block; background-color: #88ff88; }
Hier is alleen width=100 gedefinieerd.
Morbi ut dolor vel erat rhoncus euismod ut eu risus.
Iets geavanceerder
Wat gebeurt er als we de afbeelding tussen de divs zetten? Dit is niet wat je verwacht in eerste instantie maar "float: right;" zorgt ervoor (in een ultimate poging) dat de afbeelding toch naar rechts gaat.
Dit is div container2 .Style: .container2 { display: inline-block; padding: 10px; background-color: #8888ff; }
This is div3 and some text. Style: .div3 { display: inline-block; background-color: #ff8888; }
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Dit is div4 en wat tekst. Style: .div4 { display: inline-block; background-color: #88ff88; }
Morbi ut dolor vel erat rhoncus euismod ut eu risus.
Werken met kolommen
Een benadering
Nu voegen we div5 toe bovenaan en willen we dat div6 en div7 zich gedragen als kolommen met een breedte van div6 van 25%. Voor de stijl van div6 en div7 is "float: left;" gebruikt.
This is div container3. Style: .div3 { display: inline-block; background-color: #ff8888; }.
This is just a div5. Style: .div5 { background-color: #ffff88; }
This is div6 and some text. Style: .div6 { float: left; width: 25%; display: inline-block; background-color: #ff8888; }
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is div7 and some text. Style: .div7 { float: left; display: inline-block; background-color: #88ff88; }
Morbi ut dolor vel erat rhoncus euismod ut eu risus.
Iets anders
Dit is hetzelfde maar div8 en div9 bevatten nu "vertical-align:top;" en niet "float: left;". Zoals je kan zien is de invloed van "float: left;" iets te enthousiast, de lay-out is verreupt, schaal maar eens, zelfs toch ruim onder wat is gedefinieerd als "float: left;". Het is wel onze eigen schuld want na een element "float:..." moet ook een stijl voor het volgende element volgen met "clear: left;"
Dit is div container3. Style:: .div3 { display: inline-block; background-color: #ff8888; }
Dit is gewoon een div5. Style: .div5 { background-color: #ffff88; }
Dit is div8 met wat tekst. Style: .div8 { vertical-align: top; width: 25%; display: inline-block; background-color: #ff8888; }.
Hierna (tussen divs) volgt img-tag met width="100" en style imgr.
Dit is div9 met wat tekst. Style: .div9 { vertical-align: top; display: inline-block; background-color: #88ff88; }.
Morbi ut dolor vel erat rhoncus euismod ut eu risus.
Een beetje moeilijker
Nu bevat div5 divs. De afbeelding is onderdeel van div9. Je browser probeert zoveel mogelijk informatie te proppen per vierkante centimeter, dus is het logisch dat alle voorgaande inspanningen verloren zijn gegaan. We moeten wat dingen herstructureren.
Dit is container3. Style: .div3 { display: inline-block; background-color: #ff8888; }.
Dit is gewoon div5. Style: .div5 { background-color: #ffff88; }.
div tekst 1
div tekst 2
div tekst 3
div tekst 4
div tekst 5
Dit is div8.
Style: .div8 { vertical-align: top; width: 25%; display: inline-block; background-color: #ff8888; }.
Dit is div9 met wat meer tekst en een afbeelding tussen de tekst. Style: .div9 { vertical-align: top; display: inline-block; background-color: #88ff88; }.
Morbi ut dolor vel erat rhoncus euismod ut eu risus. Aenean vel felis ut mauris laoreet consectetur. Nunc finibus at turpis sed rutrum. Vestibulum vel aliquam massa, vitae suscipit nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas eget laoreet sapien. Phasellus non neque sit amet leo ultricies iaculis.
Proin nec elit non tellus ullamcorper bibendum. Pellentesque a nisi non dui viverra tincidunt nec eget nisi. Pellentesque egestas sagittis ipsum, ut cursus turpis vehicula vel. Phasellus vitae nisl ac tellus vehicula tristique vitae sit amet dui. Nam quis nisi convallis, maximus urna nec, semper sem. Nam hendrerit dignissim eros a convallis. Nunc libero neque, commodo eu augue a, dignissim eleifend sapien. Nullam nec odio eget turpis scelerisque interdum. Vestibulum efficitur finibus iaculis. Morbi bibendum scelerisque nulla, vitae ultrices elit venenatis non.
Opgelost
Nu bevat div5 ook divs. Deze 5 divs passen in de bovenliggende container omdat hun breedte 20% is, zoals gedefinieerd in stijl .div10. Div8 was gedefinieerd als 25% width, een logische stap is dus om div11 75% te maken, zodat alles in div8 past. Klopt? Niet dus! Zonder aanwijzing zit er een kleine ruimte tussen div8 en div11, dus 75% dwingt div11 onder div8 te vloeien. Maar: 74% is wel in orde. Nou ja, er is een reden voor de ruimte tussen de divs, het is net als met woorden, het zijn min of meer spaties. Je kunt dit compenseren door de stijl van de container-div "font-size: 0;" mee te geven en de lettergrootte van de onderliggende divs terug naar normaal te veranderen. Echter, dat maakt alles weer hopeloos complex, dus kun je overwegen om het te vergeten. Style: div10 { text-align: center; display: inline-block; width: 20%; background-color: #88ffff; }.
Dit is div container3 (style: .div3 { display: inline-block; background-color: #ff8888; }), de p-tag wordt gevolgd door een afbeelding - logo van je organisatie.
Dit is een div5, die als container fungeert voor div10-stukjes. Als je deze tekst weghaalt dan hou je een container over die uisluitend gevuld is met div10-stukjes. Denk aan menuknoppen.
div10 tekst 1.
div10 tekst 2
div10 tekst 3
div10 tekst 4
div10 tekst 5
Dit is div8 met wat tekst.
Style: .div8 { vertical-align: top; width: 25%; display: inline-block; background-color: #ff8888; }.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Dit is div11 met wat meer tekst en een afbeelding tussen de tekst.
Style: .div11 { vertical-align: top; width: 74%; display: inline-block; background-color: #88ff88; }.
Morbi ut dolor vel erat rhoncus euismod ut eu risus. Aenean vel felis ut mauris laoreet consectetur. Nunc finibus at turpis sed rutrum. Vestibulum vel aliquam massa, vitae suscipit nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas eget laoreet sapien. Phasellus non neque sit amet leo ultricies iaculis.
Proin nec elit non tellus ullamcorper bibendum. Pellentesque a nisi non dui viverra tincidunt nec eget nisi. Pellentesque egestas sagittis ipsum, ut cursus turpis vehicula vel. Phasellus vitae nisl ac tellus vehicula tristique vitae sit amet dui. Nam quis nisi convallis, maximus urna nec, semper sem. Nam hendrerit dignissim eros a convallis. Nunc libero neque, commodo eu augue a, dignissim eleifend sapien. Nullam nec odio eget turpis scelerisque interdum. Vestibulum efficitur finibus iaculis. Morbi bibendum scelerisque nulla, vitae ultrices elit venenatis non.