Div se estira y se superpone.

[grey]

Hola amigos, tengo es siguiente problema, tengo un div que al ponerle contenido se estira con el problema que el div contenedor no, y este se superpone al div de abajo.

Código:

<div id="contenedor">

<div id="perso">
<div id="cont_foto"> <img src="../imagenes/perso/mifoto.jpg"/>  </div>

<div id="cont_texto">

<p>
Aqui va el texto que hace estirar el div...
...
...
</p>
</div>

</div>
</div>
<div id="footer></div>

Este es el codigo, el div 'perso' se termina superponiendo al div 'footer'.

Codigo css:

Código:

#contenedor{
margin: 0 auto;
width:550px;
background-color:#ddd;
border:#aaa 1px solid;
padding:15px;
min-height:300px;
}

#perso{
margin:0 auto;
width:500px;
padding:24px;
background-color:#bbb;
border:#990000 1px solid;
height:450px;
}
#cont_foto{
width:199px;
background-color:#eee;
border-right:#aaa 1px dashed;
float:left;
}

#cont_texto{
width:300px;
background-color:#eee;
float:right;
}

#footer{
   width:950px;
   background-color: #64ccac;
   text-align:right;
   height:50px;
   clear: both;
}

Si me pueden dar una mano, se los agradezco.
Saludos.

[xRommelx]

eso es porque el div contenedor ya tiene un Height definido

[grey]

Hola le saqué el 'min-height' al div perso.
Pero el problema persiste y ahora el div contenido se sale para afuera del contenedor. :(

Me parece que esta parte la voy a hacer con tablas.

Saludos.

[alexk]

agrega... un overflow:hidden; a #perso para forzar la altura de este, por los elementos que estan flotados en su interior y salieron fel flujo natural...

Código:

#perso {
overflow:hidden;
}