Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Anidar Divs dentro de Divs

Estas en el tema de Anidar Divs dentro de Divs en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/07/2015, 07:10
 
Fecha de Ingreso: junio-2015
Ubicación: Madrid
Mensajes: 29
Antigüedad: 4 años, 5 meses
Puntos: 2
Exclamación Anidar Divs dentro de Divs

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

Última edición por Wazz; 17/07/2015 a las 07:17
  #2 (permalink)  
Antiguo 17/07/2015, 07:34
Avatar de jose8luis  
Fecha de Ingreso: abril-2013
Ubicación: Barcelona
Mensajes: 44
Antigüedad: 6 años, 7 meses
Puntos: 5
Respuesta: Anidar Divs dentro de Divs

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.
__________________
Working Hard in TMS Marketing and José Luis López
¿Necesitas ayuda con SEO o SEM? Preguntame.
  #3 (permalink)  
Antiguo 17/07/2015, 08:34
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 444
Antigüedad: 5 años
Puntos: 207
Respuesta: Anidar Divs dentro de Divs

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
  #4 (permalink)  
Antiguo 17/07/2015, 09:06
 
Fecha de Ingreso: junio-2015
Ubicación: Madrid
Mensajes: 29
Antigüedad: 4 años, 5 meses
Puntos: 2
Respuesta: Anidar Divs dentro de Divs

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 .

Etiquetas: anidar, columnas, divs
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:21.