oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso CSS - Lección 13: Elementos flotantes
Pasemos a ver ahora que podemos hacer en nuestras páginas usando la propiedad float. Con esta propiedad podemos conseguir que la caja con su contenido flote a la derecha o izquierda bien de un documento o una caja contenedora.
Pero veamos una captura para que esto nos quede más claro:
Por ejemplo, si insertamos una imagen a la izquierda de un documento y queremos que el resto lo ocupe algo de texto como muestra la siguiente captura:
¿Cómo lo conseguimos?
Venga sigue leyendo que te explico como conseguimos este efecto.
El código HTML sería el siguiente:
<div id="imagen">
<img src="fernando.png"/>
</div>
<p>AQUÍ IRÍA EL TEXTO</p>
Ahora para que la imagen flote a la izquierda debemos abrir nuestra hoja de estilos CSS y fijar la propiedad float con el valor left. Si quisiéramos que la imagen flotará a la derecha tendríamos que darle el valor right.
El código CSS quedaría de la siguiente manera:
#imagen {
float: left;
{
¿Ha quedado claro como funciona la propiedad "float"? Seguro que si. Venga sigue avanzando por las lecciones haber que podemos seguir aprendiendo ;=) .
Quiero aprender más!!!
- Avanzar a Lección 14: Posicionar elementos
- Retroceder a Lección 12: Modelo de caja (altura y anchura)
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®