Wanneer je mijn div layout tutorial hebt gevolgd weet je dat de container (zo heb ik hem in mijn css genoemd) hetgeen is dat jouw gehele layout bij elkaar houdt. Maar door iets aan de code (in je css) van de wrapper toe te voegen kun je er voor zorgen dat de wrapper de achtergrond van zowel je contentvlak als sidebar mooi laat doorlopen tot hoe lang jouw wrapper ook zal moeten worden. Hoe lees je hieronder.

1. Bepaal eerst hoe breed jouw gehele wrapper en sidebar gaat worden in dit geval gebruik ik 800px voor de gehele wrapper waarvan 250px breed de sidebar moet worden (dus automatisch zal je contentvlak dan 550px breed zijn).

2. Open dan Photoshop of een ander programma dat jij wilt gebruiken en open een nieuw document van 800px breed en 20px hoog.

3. Vul het document met de kleur die jij in je content vlak wilt weergeven (ik gebruik lichtgrijs #acacac). Selecteer dan de Rectangular Marquee Tool (of een andere tool om een selectie te maken) en maak een selectie van 250px breed (dit wordt de achtergrondkleur van je sidebar) en vul deze met de door jouw gewenste kleur (ik gebruik donkergrijs #c3c3c3). Onderstaand (is verkleind) is wat je ongeveer hebt gemaakt: Sla dit op als bijvoorbeeld containerbkg.

1. Kopieer onderstaande code naar een nieuw document in je kladblok of pas je css aan in je eigen stylesheet.
We hebben hier aangegeven dat de container 800px breed moet zijn met als achtergrond de hierboven gemaakte afbeelding en de afbeelding moet zich van links naar rechts en van boven naar beneden herhalen

#container {
margin: 0px auto;
width: 800px;
background: url(containerbkg.jpg) repeat;}

2. Waar je nu alleen wel op moet letten (aangezien deze afbeelding de maten van je contentvlak en sidebar al bevatten) dat je in je css de juiste breedtes gebruikt. Dus in dit geval zou het voor je content code onderstaande moeten zijn:

#content {
float: right;
padding: 10px 0 0 7px;
width: 540px;
color: #000;
text-align: left;
}

En voor je sidebar:

#sidebar {
float: left;
padding: 10px 0 0 7px;
width: 245px;
color: #000;
text-align:left;
}

Ik hoop dat dit duidelijk genoeg is, maar mocht er toch iets nog niet duidelijk zijn kun je ten alle tijde hieronder een berichtje achterlaten.