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.

Contenidos ocultar
1 Método 1. Usando un contenedor flexible flex.
1.1 Ejemplo 1. Columnas de mismo ancho:
1.2 Ejemplo 2. Columnas de ancho diferente. Contenido más sidebar.
2 Método 2. Usando flotación float.
3 Método 3. Usando Bootstrap.

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.

Ejemplo 2. Columnas de ancho diferente. Contenido más sidebar.

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.