Capas flotantes en CSS
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>
<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>