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