[SOLUCIONADO] DIV ignora los elementos que tiene dentro

[Josecanalla]

El tema es así. Tengo un div de clase "completo" que tiene el siguiente código

div.completo
{
border: 1px solid #81F79F;
border-radius: 16px;
background-color: #81F79F;
width: 90%;
margin: 0 auto 0 auto;
padding: 4px;
}

dentro de él coloco varios divs de clase "lineaMuestra" con el código:

div.lineaMuestra
{
width: 90%;
margin: 0 auto 0 auto;
}

finalmente dentro de estos divs coloco labels de tipo "clase" y "valor" con el código

label.clase
{
display: block;
float: left;
width: 40%;
}

label.valor
{
display: block;
float: left;
width: 60%;
}

el display:block y float:left lo tengo que poner si no me ignora la propiedad "width".

El html es:

Código:

<div class="completo">
	<h2>Datos personales</h2>
			
	<div class="lineaMuestra"><label class="clase">Nombre</label><label class="valor">JUAN PEREZ</label></div>
	<div class="lineaMuestra"><label class="clase">Edad</label><label class="valor">25 años</label></div>
	<div class="lineaMuestra"><label class="clase">Residencia actual</label><label class="valor">ARGENTINA</label></div>
				
</div>

sin embargo, el div "completo" adquiere un alto que abarca únicamente al elemento h2. Ignora completamente todos los labels y éstos quedan por debajo del div (me doy cuenta por el background color). ¿Cuál es el error?

Saludos!

[pzin]

Cuando flotas un elemento automáticamente se convierte en un elemento de bloque, por lo que el display te sobra en los elementos que flotas.

Para hacer que el elemento crezca según su contenido flotado, simplemente aplícale a ese elemento un:

Código CSS:

overflow: hidden;
 

O usas un micro-clearfix, aunque te vale con eso.

[Josecanalla]

Excelente! Agregué esa propiedad a div.completo y funcionó.