Foros del Web » Creando para Internet » CSS »

Consulta: Div dentro de div + Columnas

Estas en el tema de Consulta: Div dentro de div + Columnas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/02/2010, 10:58
 
Fecha de Ingreso: mayo-2003
Mensajes: 312
Antigüedad: 14 años, 6 meses
Puntos: 2
Consulta: Div dentro de div + Columnas

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.
  #2 (permalink)  
Antiguo 13/02/2010, 14:16
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Consulta: Div dentro de div + Columnas

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!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 05/03/2011, 05:22
 
Fecha de Ingreso: junio-2001
Mensajes: 23
Antigüedad: 16 años, 5 meses
Puntos: 1
Respuesta: Consulta: Div dentro de div + Columnas

Cita:
Iniciado por Calizman Ver Mensaje
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 :(
__________________
A la mierda los torpedos... ¡Avante toda!
  #4 (permalink)  
Antiguo 05/03/2011, 15:17
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Consulta: Div dentro de div + Columnas

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;".

Etiquetas: columnas
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 00:54.