Color de fondo css con elementos flotantes.
Digamos que tenemos este escenario muy simple.
<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>
Y este es el 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;
}
Y la cosa es ... cuando le agrego contenido, debería bajar el div principal, y necesitamos ver el fondo rojo ... la cosa es que no puedo ver el fondo rojo llenar toda la altura.
¿¿¿Algunas ideas???
Muchas gracias por adelantado.
EDITAR: Aquí hay un violín para probar