Categoria: Programacion Tema: Css Titulo: Disposicion de 2 columnas en html con Css
Fecha del Tema: 2013-02-25 19:15:01Disposición de 2 columnas en html con Css Empezaremos a ver como componer una página sin utilizar las tablas (un medio muy utilizado hasta hace muy poco, ya que es ampliamente soportado por navegadores antiguos). Una solución para crear una página con dos columnas es utilizar el posicionamiento absoluto: <?php //esto no va <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="columna1"> Aquí va el contenido de la columna 1. </div> <div id="columna2"> Aquí va el contenido de la columna 2. </div> </body> </html> ?>//esto no va La hoja de estilo para esta página es: <?php //esto no va *{ margin:0px; padding:0px; } #columna1 { position:absolute; top:0px; left:0px; width:200px; margin-top:10px; background-color:#ffff55; } #columna2 { margin-left:220px; margin-right:20px; margin-top:10px; background-color:#ffffbb; } ?>//esto no va La primera regla de disponer el selector universal, es decir, afecta a todas las marcas HTML (a no ser que se defina una regla específica para una marca), es sacar el margen y padding: <?php //esto no va *{ margin:0px; padding:0px; } ?>//esto no va Ahora la regla definida para la primer columna es: <?php //esto no va #columna1 { position:absolute; top:0px; left:0px; width:200px; margin-top:10px; background-color:#ffff55; } ?>//esto no va Es decir, inicializamos la propiedad position con el valor absolute, con lo que debemos indicar la posición del div en la página por medio de las propiedades top y left, en esta caso lo posicionamos en la columna 0 y fila 0 y además inicializamos la propiedad width, con lo cual le estamos indicando que esta columna tendrá siempre 200 píxeles de ancho. Además inicializamos la propiedad margin-top con 10 píxeles, recordemos que todos los elementos tienen margin y padding cero. Ahora veamos cómo inicializamos la segunda columna: <?php //esto no va #columna2 { margin-left:220px; margin-right:20px; margin-top:10px; background-color:#ffffbb; } ?>//esto no va Esta regla no inicializa la propiedad position, por lo que el div ocupa la posición que le corresponde por defecto, es decir, empieza en la coordenada 0,0 de la página. El truco está en inicializar la propiedad margin-left con un valor mayor a 200, que es el ancho de la columna1. El resto de propiedades que inicializamos son el margin-top, para que sea igual que la primera columna y el margin-right, para que no quede el texto pegado a la derecha.
Disposición de 2 columnas en html con Css Empezaremos a ver como componer una página sin utilizar las tablas (un medio muy utilizado hasta hace muy poco, ya que es ampliamente soportado por navegadores antiguos). Una solución para crear una página con dos columnas es utilizar el posicionamiento absoluto: <?php //esto no va <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="columna1"> Aquí va el contenido de la columna 1. </div> <div id="columna2"> Aquí va el contenido de la columna 2. </div> </body> </html> ?>//esto no va La hoja de estilo para esta página es: <?php //esto no va *{ margin:0px; padding:0px; } #columna1 { position:absolute; top:0px; left:0px; width:200px; margin-top:10px; background-color:#ffff55; } #columna2 { margin-left:220px; margin-right:20px; margin-top:10px; background-color:#ffffbb; } ?>//esto no va La primera regla de disponer el selector universal, es decir, afecta a todas las marcas HTML (a no ser que se defina una regla específica para una marca), es sacar el margen y padding: <?php //esto no va *{ margin:0px; padding:0px; } ?>//esto no va Ahora la regla definida para la primer columna es: <?php //esto no va #columna1 { position:absolute; top:0px; left:0px; width:200px; margin-top:10px; background-color:#ffff55; } ?>//esto no va Es decir, inicializamos la propiedad position con el valor absolute, con lo que debemos indicar la posición del div en la página por medio de las propiedades top y left, en esta caso lo posicionamos en la columna 0 y fila 0 y además inicializamos la propiedad width, con lo cual le estamos indicando que esta columna tendrá siempre 200 píxeles de ancho. Además inicializamos la propiedad margin-top con 10 píxeles, recordemos que todos los elementos tienen margin y padding cero. Ahora veamos cómo inicializamos la segunda columna: <?php //esto no va #columna2 { margin-left:220px; margin-right:20px; margin-top:10px; background-color:#ffffbb; } ?>//esto no va Esta regla no inicializa la propiedad position, por lo que el div ocupa la posición que le corresponde por defecto, es decir, empieza en la coordenada 0,0 de la página. El truco está en inicializar la propiedad margin-left con un valor mayor a 200, que es el ancho de la columna1. El resto de propiedades que inicializamos son el margin-top, para que sea igual que la primera columna y el margin-right, para que no quede el texto pegado a la derecha.
