Wat ziet een gewone gebruiker als deze lay-out in een schoon HTML-document plaatst? (een externe div met een rode rand over de volledige breedte, hoogte 100px, binnen een vierkant van 100x100 met groene randen)

De gebruiker ziet een rood horizontaal rechthoek dat de volledige breedte van het scherm inneemt en 100 pixels hoog is. Binnen dit rechthoek bevindt zich een vierkant van 100x100 pixels met een groene rand. Als het vierkant niet specifiek gepositioneerd is, wordt het geplaatst in de linkerbovenhoek van de externe div, omdat elementen standaard linksboven worden geplaatst.

Voorbeeld van het visuele resultaat:

• Externe div: rode rand, 100% schermbreedte, hoogte 100px.
• Interne div: vierkant van 100x100px met groene rand, linksboven binnen de externe blok.