Posicionamiento

En los ejemplos vistos hasta ahora, el navegador representa los elementos en el orden en el que aparecen, atendiendo a si son elementos block o inline, entre otras cosas.

Utilizando CSS, es posible modificar el posicionamiento por defecto de los elementos. Las propiedades implicadas son:

position
float

`float`

Con la propiedad float, los elementos «flotan» hacia la izquierda o derecha. Todos los elementos flotados se van situando uno junto a otro. Si no hay espacio disponible, se pasan a una nueva línea. Se adapta bastante bien a diferentes tamaños de pantalla.

Supongamos el siguiente ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Etiquetas semánticas y float</title>
    <style>
      body {
        background-color: pink;
      }
      header {
        background-color: blue;
      }
      nav {
        background-color: red;
        width: 10%;
      }
      section {
        background-color: green;
        width: 90%;
      }
      footer {
        background-color: yellow;
      }
      nav,
      section {
        height: 300px;
        float: left;
      }
    </style>
  </head>
  <body>
    <header>Encabezado</header>
    <nav>Vínculos</nav>
    <section>Contenido principal del página</section>
    <footer>Página creada por...</footer>
  </body>
</html>

En este ejemplo, se utiliza la propiedad float para maquetar una página sencilla, junto a las etiquetas semánticas.

Los elementos <nav> y <section> están flotados a la izquierda y se reparten la anchura disponible.

Es necesario fijar la altura porque en la página apenas hay contenido.

En el navegador se visualizaría de la siguiente forma:

Probar en el navegador

Documento HTML

float​

`float`