[SOLUCIONADO] Anidar Divs dentro de Divs

[Wazz]

Hola a todos.

En primer lugar, disculpad lo tonta que es mi pregunta. He Empezado esta semana a estudiar HTML5 y CSS3 y estoy bastante verde. Me he leído algunos artículos pero creo que lo mejor es empezar a probar cuanto antes. Tras un rato enfrentándome a este problema, lo escribo (no lo he visto en las FAQs, o tal vez estaba expresado en unos términos diferentes a los que conozco...). Allá va.

Lo único que quiero saber es cómo meter divs dentro de divs para crear columnas, tal y como se ve en la imagen de ejemplo: http://imgur.com/KaRuAiQ

Por alguna razón dentro del div padre solo aparece uno de los dos divs hijos (el más grande) y además el div padre no tiene la altura que debería coger al tener dentro otras cajas. Os dejo el código.

Código:

<div id="todo">
    	<div class="caja1"></div>
        <div class="caja2"></div>
</div>

Código:

#todo {
	width:600 px;
        background-color:#blue;
	padding: 10px;
	display:block;
	}
	
.caja1 {
	width:100 px;
	background-color:red;
	float:left;
	height: 100px;
	}

.caja2 {
	width:400px;
	background-color: green;
	float:left;
	height: 100px;
	}

He probado a poner diferentes displays a #todo y a los divs de cajas pero la cosa no mejora. ¿Qué estoy pasando por alto?

Gracias

[jose8luis]

Buenas, es importante que vayas anidando, te pongo el CSS que he probado y funciona

#todo {
width:600 px;
background-color:blue;
padding: 10px;
display:block;
}

#todo .caja1 {
width:100 px;
background-color:red;
float:left;
height: 100px;
}

#todo .caja2 {
width:400px;
background-color: green;
float:left;
height: 100px;
}

También prueba de poner contenido dentro de los divs caja 1 y caja 2.

Ya me dirás. Saludos.

[fede5426]

jose8luis No se donde lo habrás probado pero así no se soluciona el problema tranquilamente puede poner los estilos sin anidar como le dijiste. Es muy bueno anidar, pero no es indispensable.

Wazz si te fijas en tu CSS, tus valores tienen separado el "px" del número.. eso afecta, lo reconoce como dos cosas diferentes y no aplica la propiedad. En lugar de "100 px" tenes que poner "100px".. siempre pegado al número.

Otro error que veo, el color de "#todo" tiene un numeral adelante (O símbolo de gato, no se como le dicen en otros países.. "#"). Cuando uses colores hexadecimales, coloca el símbolo, pero si usas el nombre del color ese símbolo no va, nunca se va a aplicar el color.

De paso, un consejo.. cuando flotes elementos, a su contenedor asignale la propiedad overflow con valor hidden, sino vas a tener problemas. Lo vas a poder comprobar cuando soluciones lo del color, borrale el "#" a "#blue" y vas a ver que el contenedor es una linea gruesa y los divs que contiene se desbordan. Con overflow:hidden; se soluciona.

Saludos

[Wazz]

He aplicado las indicaciones de fede5426 y la cosa se ha arreglado. ¡Gracias!

No había trabajado con la propiedad Overflow, investigaré sobre ella porque es imprescindible a lo que se ve .