Div der strækker sig med to divs i der har float

Som emnet hentyder til så har jeg en div med to divs inden i sig som skal lægge sig op ad hinanden..

Dette er sådan set ikke noget problem, bortset fra jeg gerne vil have min div boks til at strække sig.

Opstillingen ser således ud:

 <div id="wrapper">
 <div id="indhold">
 <div id="boks1">En masse indhold</div>
 <div id="boks2">En til boks</div>
 </div>
 <div id="bund"></div>
 </div>

Og stylingen er:

 #wrapper
 {
     width: 903px;
     margin-left: auto;
     margin-right: auto;
 }
 
 #indhold
 {
     background-image: url(../images/midt.jpg);
     width: 903px;
 }
 
 #bund
 {
     background-image: url(../images/bund.jpg);
     width: 903px;
     height: 30px;
 }
 
 #boks1
 {
     width: 490px;
 }
 
 #boks2
 {
     width: 400px;
 }

Det virker fint nok, men min boks2 ligger sig under min boks 1. Jeg vil have den ved siden af..

Det er det jeg skal bruge float: left til ved boks1 og boks2, men når jeg bruger float: left ligger de sig ved siden af hinanden, men indhold diven bliver ikke strukket

Her er et konkrekt eksempel:
http://test.dumpen.dk/divProblem/

Kan i hjælpe?