CSS

Hacer dos columnas con CSS

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.

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;
}

Deja un comentario

14 Comentarios