Deze base is ongeveer hetzelfde als base 4. Zoals je ziet is de hoogte weer 100%. Het verschil is dat er links nu een kolom staat. Dit kun je doen door middel van een paar simpele css trucjes. De content en de linkerkolom moet allebei een float: left; hebben. Ook moet je bij allebei een breedte instellen die opgeteld 800px is, net zo breed als de container. Daarna moet je achter de twee kolommen een nieuwe div maken. In de style van de div zet je clear: both;, en een hoogte die hetzelfde is als die van de footer. Dit moet je doen om ervoor te zorgen dat de footer onder de twee kolommen blijft staan. Als je dit niet doet zal de footer bovenop de kolommen komen te staan, omdat je daar een float hebt ingesteld.
Je ziet dat de linker kolom niet helemaal doorloopt tot de footer. Dit kun je simpel oplossen door in de achtergrond van de container een afbeelding te zetten, waarin links de kleur van de rechterkolom staat, en rechts de kleur van de content. De afbeelding zal worden herhaald tot de bodem van de pagina, en daardoor zal het lijken ofdat de kolommen wel allebei doorlopen tot de footer. Ditzelfde trucje kun je ook gebruiken bij drie kolommen.
Belangrijk:
#left-column {
float: left;
width: 250px;
}
#content {
float: left;
width: 550px;
}
< div style="clear: both; height: 40px;">< /div>