Div i divs

Hej udviklere
Jeg har noget kode der godt kunne se sådan her ud:

 <div id ="div1">
             <div id="div2">
                 
             </div>
             
             <div id="div3">
                 
             </div>            
 </div>

Div 1 har en baggrundsfarve så jeg kan se at den dækker over indholdet i både 2 og 3.

div 2 og div 3 skal være ved siden af hinanden så jeg skriver float:left i dem begge. Men nu forsvinder baggrunden pludselig så det ser ud som om at div 1 nu ikke dækker over div 2. Hvorfor sker det når jeg sætter float:left ind?