проблема с float

[Digidie]

Доброго времени суток!
В общем проблема такая.Есть макет состоящий из шапки,двух колонок и подвала.После шапки идёт wrapper. В нём левая колонка и контент.Надо чтобы во wrapper'e был background. вот код:

html

<div id="wrapper">
<div id="left">LEFT<br><br><br><br><br>< br><br><br><br><br></div>
<div id="content">CONTENT</div>
</div>

css
#wrapper{
background: url(../images/wrap_bg.gif) repeat-y top center;
width:991px;
height:100%;
border:1px solid red;
margin:0 auto;
}
#left{
float:left;
width:259px;
height:100%;
background: url(../images/left_bg.png) repeat-y;
border:1px solid red;
margin-left:12px;
}
#content{
width:698px;
height:100%;
border:1px solid red;
float:left;
}
Как видите у всёх трёх блоков есть background. Надо чтобы высота левой колонки зависела от содержимого контента и при этом высота самого wrapper'a (в нём будет тень) тоже зависела от контента. Для большей понятности выложил скрин.На нём всё видно.Помогите пожалуйста.

[Naive]

внутрь врапера, после колонок брось блок с clear:both
бэкграунд левого блока сделай на врапере