Manual de CSS

 
 
 

Mapa Web

 
borde   borde
Portada arrow Lista de Códigos CSS arrow Capas flotantes en CSS

 

Capas flotantes en CSS Imprimir E-mail
Muchas veces hemos imaginado el diseño perfecto, pero más de una vez esas ideas se han ido de nuestras cabezas por no saber como plantearlo en nuestras hojas de estilo.

Una propiedad que me ha solucionado el 95% de los problemas de organización es Float, que permite ajustar texto alrededor de un elemento. Esto es idéntico en propósito a align=left y align=right para el elemento IMG de HTML 3.2, pero CSS1 permite que todos los elementos "floten".

Uno de los ejemplos que suelo utilizar es la división del documento html en dos partes; derecha e izquierda, con tan solo definir la propiedad Float en "left" o "right".

Copiar el siguiente ejemplo para obtener las capas flotantes:

<html>
<head>

<style type="text/css">
body {margin:0}
#izquierda {background: green; width:50%; height:100%; float: left}
#derecha {background: red; width:50%; height:100%; float: right}
</style>

</head>
<body>

<div id="izquierda">Contenido del lado Izquierdo o columna Izquierda</div>
<div id="derecha">Contenido del lado derecho o columna Derecha</div>

</body>
</html>
 
Francisco Javier Elgarte
www.cssboulevar.com.ar

 

 
Portada
Capítulos del Manual de CSS
Introducción a CSS
El Tag LINK
El Tag STYLE y la directiva @import
Comentarios CSS y Reglas Básicas
Agrupación de Selectores y Declaraciones
El Atributo Class y el Atributo ID
Pseudo-clases y Pseudo-elementos
Estructura y Herencia
Especificidad y Estilos en Cascada
Clasificación de los elementos y Colores
Unidades
Identación
Alineación
Espacios en Blanco
Anchura de Líneas
Alineación Vertical
Espacio entre Palabras y entre Letras
Transformación del Texto
Decoración del Texto
Practicar en línea
Lista de prácticas en línea
FAQ
Preguntas frecuentes
Códigos CSS
Lista de Códigos CSS
Foros
Foros CSS
Otros Manuales
Manuales de otros lenguajes
 
   
 
 
Alojamiento web en Hostalia