Linkerkant
Linkerkant: achtergrond van h2 in de header-div
De h2 header in de header-div krijgt als achtergrond de linkerbovenkant van het plaatje. Dit kunnen we veilig doen, zolang je maar zorgt dat er altijd een h2 header in div.rounded-header staat.
Bekijk voorbeeld 4
Hier komen we het tweede probleem tegen; de achtergrond van de h2 komt nu boven de achtergrond van div.rounded-header te liggen! Dit lossen we op door de h2 een marge van 20 px aan de rechterkant te geven. Dit betekent trouwens meteen, dat de padding aan de rechterkant weer op 0 kan.
Bekijk voorbeeld 4 verbeterd
Ook nu maken we de tekst in de browser even wat groter om te kijken of alles nog goed gaat.
Linkerkant: de content-div
We hoeven nu alleen nog de linkeronderkant te doen. Omdat we in het begin div.rounded-box hebben gebruikt voor de rechteronderkant, hebben we nu div.rounded-content nog beschikbaar voor de linkerkant.
Met de content-div krijgen we hetzelfde probleem als met de h2 in de header-div; de achtergrond mag aan de rechterkant niet overlappen. Daarom krijgt de content-div een rechtermarge. De padding aan die kant kan dan op 0.
Bekijk voorbeeld 5
Schaalbaarheid in de breedte
Om te checken of deze methode ook in de breedte schaalt, nog een voorbeeld op een andere breedte (met uiteraard dezelfde code):
Bekijk voorbeeld 6