6. CSS avanzados

6.2. Posicionamiento

Entender cómo se posicionan los elementos en CSS puede resultar complicado. Estudiar todos los casos sería inabarcable. Vamos a ver un ejemplo básico que nos permita sentar las bases para poder profundizar en caso de necesidad.

El atributo "float" nos permite decir si un elemento quedará alineado a la derecha o a la izquierda con respecto a otro. Se usa constantemente para generar estructuras de varias columnas. Puede servirnos para crear contenidos a medida en nuestras páginas de EducaMadrid y maquetarlos con dos o más columnas, o para crear un contenido con una imagen en un lateral y el texto en el otro, por ejemplo.

Veamos un ejemplo. Partiremos de un código HTML sencillo y algunas definiciones CSS.

  • Vamos a crear un documento con este código y a hacer cambios en las propiedades "float", y en el ancho de las capas.
  • Daremos a la capa #ejemplo un ancho determinado (en unidades relativas primero y luego en absolutas) y jugaremos con el ancho de cada una de las columnas: primero en unidades relativas (%) y luego en absolutas (px).
  • Así comprenderemos mejor cómo se comportan los elementos.

HTML:

<div id="ejemplo">
    <div id="columna-1">
    </div>
    <div id="columna-2">
    </div>
</div>

CSS:

#columna-1{
    height:200px;
    width:300px;
    background:red;
    float:left;
} 

#columna-2{
    height:200px;
    width:500px;
    background:green;
    float:left;
}

Recursos de interés