cor de fundo css com elementos flutuantes
Vamos dizer que temos este cenário muito simples
<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>
E esse é o estilo:
.content {
width: 960px;
height: auto;
margin: 0 auto;
background: red;
clear: both;
}
.left {
float: left;
height: 300px;
background: green;
}
.right {
float: right;
background: yellow;
}
E a coisa é ... quando eu adiciono conteúdo a ele, devo puxar para baixo o div pai, e precisamos ver o fundo vermelho ... a coisa é, eu não consigo ver o fundo vermelho encher toda a altura.
Alguma ideia???
Obrigado uma tonelada em avançado.
EDITAR: aqui está um violino para testar