Entrar

Como Crear varias Columnas con DIV

elturle · · Solicitar retirada
Hola:

He estado viendo el tema de las divisiones con float y he visto que solamente se pueden poner dos columnas (float right, float left), pero que hay que hacer si se necesitan 3, 4 ó más columnas.

He estado mirando por el foro y no lo he encontrado, si hubiese algún ejemplo, ruego me pongais el link.

Un Saludo.
Juan Carlos
Raulyure · · Solicitar retirada
elturle escribió:Hola:

He estado viendo el tema de las divisiones con float y he visto que solamente se pueden poner dos columnas (float right, float left), pero que hay que hacer si se necesitan 3, 4 ó más columnas.

He estado mirando por el foro y no lo he encontrado, si hubiese algún ejemplo, ruego me pongais el link.

Un Saludo.
Juan Carlos
Hola:
Acá le dejo un ejemplo de como se pueden poner div unos al lado de otro dentro de una capa llamada cabecera, esto se pone en la hoja de estilo
#cabecera{background-color:#00FFFF;width:800px;height:120px;border-top:black 1px solid;border-right:black 1px solid;border-left:black 1px solid;}
#capa-para-cinco{background-color:FFFFFF;height:72px;width:360px;float:left;}
#capauno{background-color:#000000;height:120px;width:72px;float:left;}
#capados{background-color:#000000;height:120px;width:72px;float:left;}
#capatres{background-color:#000000;height:120px;width:72px;float:left;}
#capacuatro{background-color:#000000;height:120px;width:72px;float:left;}
#capacinco{background-color:#000000;height:120px;width:72px;float:left;}
Saludos
Agradecido de los que aprenden enseñando
Raulyure · · Solicitar retirada
elturle escribió:Hola:

He estado viendo el tema de las divisiones con float y he visto que solamente se pueden poner dos columnas (float right, float left), pero que hay que hacer si se necesitan 3, 4 ó más columnas.

He estado mirando por el foro y no lo he encontrado, si hubiese algún ejemplo, ruego me pongais el link.

Un Saludo.
Juan Carlos
Hola:
Acá le dejo un ejemplo de como se pueden poner div unos al lado de otro dentro de una capa llamada cabecera, esto se pone en la hoja de estilo
#cabecera{background-color:#00FFFF;width:800px;height:120px;border-top:black 1px solid;border-right:black 1px solid;border-left:black 1px solid;}
#capa-para-cinco{background-color:FFFFFF;height:72px;width:360px;float:left;}
#capauno{background-color:#000000;height:120px;width:72px;float:left;}
#capados{background-color:#000000;height:120px;width:72px;float:left;}
#capatres{background-color:#000000;height:120px;width:72px;float:left;}
#capacuatro{background-color:#000000;height:120px;width:72px;float:left;}
#capacinco{background-color:#000000;height:120px;width:72px;float:left;}
Saludos
Agradecido de los que aprenden enseñando
Raulyure · · Solicitar retirada
Raulyure escribió:
elturle escribió:Hola:

He estado viendo el tema de las divisiones con float y he visto que solamente se pueden poner dos columnas (float right, float left), pero que hay que hacer si se necesitan 3, 4 ó más columnas.

He estado mirando por el foro y no lo he encontrado, si hubiese algún ejemplo, ruego me pongais el link.

Un Saludo.
Juan Carlos
Hola:
Acá le dejo un ejemplo de como se pueden poner div unos al lado de otro dentro de una capa llamada cabecera, esto se pone en la hoja de estilo
#cabecera{background-color:#00FFFF;width:800px;height:120px;border-top:black 1px solid;border-right:black 1px solid;border-left:black 1px solid;}
#capa-para-cinco{background-color:FFFFFF;height:120px;width:360px;float:left;}
#capauno{background-color:#000000;height:120px;width:72px;float:left;}
#capados{background-color:#000000;height:120px;width:72px;float:left;}
#capatres{background-color:#000000;height:120px;width:72px;float:left;}
#capacuatro{background-color:#000000;height:120px;width:72px;float:left;}
#capacinco{background-color:#000000;height:120px;width:72px;float:left;}
Saludos
Agradecido de los que aprenden enseñando
Raulyure · · Solicitar retirada
Esta respuesta tenía un error
Saludos
Agradecido de los que aprenden enseñando
Ana Luisa · · Solicitar retirada
Hola,
Si has seguido el PASO A PASO CON HTML-KIT, creo que lo que quieres tambien lo puedes conseguir con el procedimiento para crear el menu horizontal de la barra de navegacion. Alli, se instalan creo 3 divisiones y si quieres, puedes añadir las que necesites.

Saludos y nos cuentas tus resultados!!!
Ana Luisa · · Solicitar retirada
Pensando más detenidamente, sería mejor que siguieras las instrucciones del menu de pie de pagina del curso paso a paso con html-kit. Alli, en la capa pie se crean 3 menus horizontales. Y añades un par de divs más a tu gusto.

saludos.
hq · · Solicitar retirada
No importa el número de Capas que crees, lo que importa es el ancho que se les vaya dando.

Así, el navegador intentará ir poniéndolas una al lado de las anteriores y cuando no caben en el ancho definido, las pone abajo.

(para una prueba gráfica visita mi web con la ventana maximizada y luego le vas cambiando el tamaño a la ventana, ya verás como los divs van encajándose o se van abajo)