Kolor tła css z elementami pływającymi

Powiedzmy, że mamy ten bardzo prosty scenariusz

 <div class="content">
    <div class="left">
       <p>some content</p>
    </div>
    <div class="right">
       <p>some content</p>
    </div>
 </div>

 <div class="content">
    <div class="left">
       <p>some content</p>
    </div>
    <div class="right">
       <p>some content</p>
    </div>
 </div>

I to jest stylizacja:

 .content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
 }

 .left {
     float: left;
     height: 300px;
     background: green;
 }

 .right {
     float: right;
     background: yellow;
 }

A rzecz polega na tym, że kiedy dodam do niego zawartość, powinienem ściągnąć rodzica div i musimy zobaczyć czerwone tło ... rzecz w tym, że nie widzę czerwonego tła wypełniającego całą wysokość.

Jakieś pomysły???

Dzięki tonie w zaawansowanym.

EDYTOWAĆ: Oto skrzypce do przetestowania

questionAnswers(3)

yourAnswerToTheQuestion