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">Aquí me pongo a cantar al compás de la vigüela, que el hombre que lo desvela una pena estrordinaria, como la ave solitaria con el cantar se consuela.<br>José Hernández<br><u>El gaucho Martín Fierro</u></div>
<div id="derecha">Aquí me pongo a cantar al compás de la vigüela, que el hombre que lo desvela una pena estrordinaria, como la ave solitaria con el cantar se consuela.<br>José Hernández<br><u>El gaucho Martín Fierro</u></div>
</body>
</html>
Autor: Federico Javier Elgarte
http://www.cssboulevar.com.ar/leer.php/articulo/2
Usuarios que han visto este tema también han visto...
- Como crear cuadros con Hojas de Estilo
- Integración de interfaz en CSS
- Menú rollover en CSS
- Atributos y valores en css
- Botones con CSS
- Versión imprimible de este documento
- Enviar por e-mail este documentoInformación legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.