Estructurar un sitio web usando columnas hechas con CSS y HTML ya es el estándar y atrás se han quedado las tablas para realizar esta función.
Método 1. Usando un contenedor flexible flex
.
Usar un contenedor flexible o flex
, es un método CSS moderno y ya bien soportado, por lo tanto más recomendado.
A grandes rasgos, se le otorga la propiedad flex
a un contenedor y se indica un comportamiento de fila (row); y a cada “hijo” o columna se le otorga un ancho determinado que les hará comportarse como tales. Un ejemplo hará todo más claro.
Ejemplo 1. Columnas de mismo ancho:
La estructura HTML sería la siguiente:
<div id="contenedor">
<div>
<p>Contenido de la primera columna.</p>
</div>
<div>
<p>Contenido de la segunda columna.</p>
</div>
</div>
Y el respectivo CSS es el siguiente:
#contenedor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#contenedor > div {
width: 50%;
}
En este ejemplo, si los hijos/columnas tienen 50% de ancho, les hace dividirse el espacio en dos, por eso se generan dos columnas. Si quisiéramos 3 columnas, sería tan sencillo como cambiar el ancho a 33%, si quisiéramos 4 columnas a 25%, etc.
Un uso muy común de las columnas es para crear la estructura de un blog, típicamente una barra lateral o sidebar y una columna con el contenido principal.
Supongamos que queremos que el contenido ocupe el 75% del ancho disponible y la barra lateral tome 25%, el código HTML sería:
<div id="contenedor">
<div id="principal">
<p>Contenido principal.</p>
</div>
<div id="sidebar">
<p>Barra lateral.</p>
</div>
</div>
Y el respectivo CSS es el siguiente:
#contenedor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#principal {
width: 75%;
}
#sidebar {
width: 25%;
}
Además, los contenedores flex tienen muchas propiedades, como modificar el orden en que se muestran las columnas y otros comportamientos útiles. Sin duda es una buena inversión de tiempo aprender más sobre las propiedades de los contenedores flex.
Método 2. Usando flotación float
.
Para crear columnas podemos empezar con la estructura HTML y posteriormente agregar los estilos CSS:
<div id="contenedor" class="clearfix">
<div id="lateral">
<p>Aquí irá el contenido alineado a la izquierda</p>
</div>
<div id="principal">
<p>Aquí irá el contenido principal a lado del contenido o menú lateral</p>
</div>
</div>
Como viste existen 3 etiquetas que servirán contenedor:
- Contenedor – Determina el espacio de trabajo total.
- Lateral – Ancho del lateral y su ubicación.
- Principal – Ancho del contenido.
La propiedades que deben tener son:
#contenedor {
text-align: left;
width: 100%;
margin: auto;
}
#lateral {
width: 20%; /* Este será el ancho que tendrá tu columna */
background-color: #CCCCCC; /* Aquí pon el color del fondo que quieras para este lateral */
float:right; /* Aquí determinas de lado quieres quede esta "columna" */
}
#principal {
width: 75%;
float: left;
background-color: #FFFFFF;
border:#000000 1px solid; /* ponemos un donde para que se vea bonito */
}
/* Para limpiar los floats */
.clearfix:after {
content: "";
display: table;
clear: both;
}
Método 3. Usando Bootstrap.
Bootstrap es uno de los frameworks de CSS más populares y ampliamente utilizados para el diseño web responsivo. En su versión 5, ofrece una forma sencilla y rápida de crear dos columnas en tu sitio web sin necesidad de escribir mucho código CSS personalizado.
Para utilizar el sistema de cuadrícula de Bootstrap 5, debes crear un contenedor principal. Este contenedor permite alinear y centrar el contenido en tu página de forma adecuada. Agrega un <div>
con la clase container
dentro del elemento <body>>
de tu archivo HTML:
<body>
<div class="container">
<!-- Tu sistema de cuadrícula aquí -->
</div>
</body>
Dentro del contenedor principal, crea un elemento <div>
con la clase row
para definir una fila. Luego, dentro de esta fila, crea dos elementos <div>
con las clases col-6
para definir dos columnas de igual ancho (el número 6 indica que cada columna ocupará la mitad del ancho total, ya que Bootstrap utiliza un sistema de 12 columnas):
<div class="container">
<div class="row">
<div class="col-6">
<!-- Contenido de la columna 1 -->
</div>
<div class="col-6">
<!-- Contenido de la columna 2 -->
</div>
</div>
</div>
Ahora puedes agregar el contenido que desees en cada columna. Por ejemplo, puedes agregar texto, imágenes o cualquier otro elemento HTML.
pablo octubre 6, 2008 a las 6:36 am
lo haces ver tan simple. Que uno no deberia evitar el agradecerte
ResponderHelthon junio 9, 2009 a las 1:02 pm
Perfecto sirvio de gran ayuda
ResponderJesus Rueda junio 17, 2009 a las 4:20 pm
Es incrieble que con codigo o en este caso estilos y layout basicos se puedan hacer cosas sorprendentes, con un poco de creatividad y empeño se arma a toa´ con la web que uno desee crear
ResponderJesus Rueda junio 17, 2009 a las 4:21 pm
Y gracias por el Aporte me saco de algunas dudas
Responderleandro agosto 12, 2009 a las 12:52 am
Fo que facil!!! gracias ahora lo voy a probar! gracias gracias
ResponderNestor enero 24, 2010 a las 7:46 am
excelente con este ejemplo ya concrete
Respondermıknatıs febrero 9, 2011 a las 2:43 am
Perfecto sirvio de gran ayuda
ResponderTato junio 28, 2011 a las 2:34 pm
Muchas gracias por la ayuda me sera muy util.
ResponderCharlie abril 30, 2012 a las 6:55 pm
Excelente es lo que buscaba y bien claro. Gracias
ResponderFrancisca marzo 9, 2013 a las 1:34 am
Está todo perfecto, pero para que el contenido de los dos ID estuvieran alineados arriba tuve que agregar al css “principal” “position:absolute”
ResponderGracias!!!
alberto julio 28, 2013 a las 7:14 am
Muchas gracias.
ResponderJorge noviembre 22, 2013 a las 10:13 am
Hola. Gracias por tu post que es de mucha ayuda.
Quiero hacerte una consulta si es posible.
Necesito hacer una página en la que haya dos columnas una principal de 600px y otra a la derecha de 200px. Hasta ahí todo sin problemas. El problema es que quiero que la columna de la derecha (la de 200px) cuando no tenga ningún contenido, cuando esté vacía, esté oculta y que la columna principal, la de 600px, ocupe el espacio que ocupaba la columna derecha, o sea que pasaría a tener 800px.
¿Es posible hacer eso con CSS?
ResponderSeyer marzo 20, 2015 a las 2:48 pm
Gracias, responde directo a la pregunta del cómo..
ResponderPablo mayo 14, 2019 a las 3:43 am
gracias
Responderm octubre 18, 2022 a las 4:54 pm
MUCHÍSIMAS GRACIAS, DE VERDAD ??
ResponderFrancisco Oliveros noviembre 19, 2022 a las 4:43 am
Por nada 🙂
ResponderMariano febrero 17, 2023 a las 6:18 am
EXCELENTE!!!!!
ResponderMayte enero 14, 2024 a las 4:30 pm
¡¡¡ GRACIAS, GRACIAS, GRACIAS !!!
ResponderFrancisco Oliveros enero 22, 2024 a las 1:01 pm
Por nada 🙂
Responder