HTML/CSS: Jak uzyskać kolorową kolumnę (pasek boczny, sidebar) na całej wysokości strony?

Częstym problem, który pojawia się przy tworzeniu strony opartych na pływających (float) elementach jest to, że pasek boczny kończy się wcześniej niż część główna strony.

Jak to rozwiązać?

Przykład: 

Układ dwukolumnowy. Strona z jednym paskiem bocznym umieszczonym po prawo.

Mamy więc dwa elementy div: lewy (#wrapper-left) z główną zawartością strony oraz prawy (#wrapper-right) pasek boczny, który ma np. czerwone tło.

<div id="wrapper">
   <div id="wrapper-left"> zawartość strony .... </div>
   <div id="wrapper-right"> zawartość paska bocznego ... </div>
</div>

#wrapper {
float:center;
background: white;width: 1000px;
}
#wrapper-left{
float: left;
width: 800px;
background: white;}
#wrapper-right{
float: left;
width: 200px;
background: red;}

Takie rozwiązanie powoduje, że czerwony pasek boczny  nagle urywa się. Tworzy się pod nim pusta przestrzeń. Nie wygląda to dobrze.

Rozwiązanie:
Należy przygotować obrazek o szerokości paska bocznego, w jego kolorze. A następnie umieścić go jako tło w głównym wrapperze dosuwając do prawej górnej krawędzi.

#wrapper {
float:center;
background: url(http://... link do obrazka z kolorem czerwonym ...) repeat-y right top;width: 1000px;
}