Imprimir este CapítuloImprimir este Capítulo

I. CSS (hojas de estilo en cascada)

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