Consulta: Div dentro de div + Columnas

Dago · #1 (**permalink**) 13/02/2010, 10:58

Gente,
Me estoy volviendo loco, intentando hacer lo que les comentare. Probablemente, esto me ocurre porque siempre diagrame con tablas. Y bue... Ahora con el tema de las capas, es todo un dolor de cabeza :)

Lo que quiero lograr es lo siguiente.

Un div de 790 que tenga color rojo centrado.
Un div de 780 verde centrado.
Un div de 770, contenedor, centrado.
Dentro de ese div, dos div, a modo de columnas. Uno de 5px, el otro de 765px.

Hasta donde me da la cabeza, pense lo siguiente

Código:

<!-- DIV de 790 centrado y de color rojo --> 
<div id="UNO" style="widht: 790; margin-left: auto; margin-right: auto; background-color: red;">

<!-- DIV de 780 centrado dentro del DIV de 790. Este de color verde -->
<div id="DOS" style="width: 780px; margin-left: auto; margin-right: auto; background-color: green;">

<!-- DIV de 770 centrado dentro del DIV de 780. Este de color marron -->
<div id="TRES" style="width: 770px; margin-left: auto; margin-right: auto; background-color: brown;">


<!-- DIV de 5px dentro del DIV de 770. Color azul -->
<div id="columna1" style="float: left; width:5px; background-color: blue;"></div>

<!-- DIV de 765px dentro del DIV de 770 pegado al de 5px. Color negro -->
<div id="columna2" style="margin: 0; float:left; width:765px; background-color: black"></div>

</div> <!-- cierro div de 770 -->
           
</div> <!-- cierro div de 780 -->
</div> <!-- cierro div de 790 -->

Resumo:
Dentro del DIV UNO, que deberia estar centrado en la pagina, está el DIV DOS. Este, estaría centrado dentro del DIV UNO.

Dentro del DIV dos, estaria el div 3 de 770px. Este, deberia estar centrado dentro del div de 780px.
Dentro del div 3, estarian las 2 columnas hechas con div.

En fin...
No logro dar con la tecla...
Cualquier ayuda, sera mas que bienrecibida.

MIL GRACIAS.

Calizman · #2 (**permalink**) 13/02/2010, 14:16

Saludos!

No deberia estar haciendo esto, pero hoy tuve un poco de tiempo libre y me llamó la atencion lo que pedias, asi que con unos minutos libres, hice lo que pides.

Espero que estudies el codigo y te sirva para lo que necesites. Si no entiendes algo o si tienes alguna pregunta, no dudes en consultarme. Lo puedes descargar desde este enlace.

Que lo disfrutes! Hasta Luego!

Herni_Hdez · #3 (**permalink**) 05/03/2011, 05:22

Cita:

Iniciado por Calizman

Saludos!

No deberia estar haciendo esto, pero hoy tuve un poco de tiempo libre y me llamó la atencion lo que pedias, asi que con unos minutos libres, hice lo que pides.

Espero que estudies el codigo y te sirva para lo que necesites. Si no entiendes algo o si tienes alguna pregunta, no dudes en consultarme. Lo puedes descargar desde este enlace.

Que lo disfrutes! Hasta Luego!

Yo he intentado bajarlo para ver el código y no me deja :(

sanxuan · #4 (**permalink**) 05/03/2011, 15:17

Tu código funciona perfectamente, pero no se verá mientras no tenga contenido o definas la altura de los div con la propiedad height. En el primer div se te ha olvidado añadir las unidades al definir el ancho. Debería decir width:790px.
La columna de 5px de ancho se puede sustituir, si no tiene contenido, por un borde izquierdo definido en columna2 usando "border-left: 5px solid blue;".