viernes, abril 19, 2024

Capas flotantes con CSS

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>

Ver Ejemplo

Este ejemplo fue agregado vía CSSboulevar, el cual es un sitio asociado a DotNetcr.com. Recuerda visitar este interesante sitio dedicado a brindar ayuda en Hojas de Estilo.
CSSboulevar, www.cssboulevar.com.ar

Roy Rojas
Roy Rojashttp://www.dotnetcr.com
Con más de 20 años de experiencia en programación, experto en lenguajes .NET, VB, C#, ASP.NET, Xamarin, XCode, DBA en SQL Server. Creador de dotnetcr.com, sitio web para programadores en español. royrojas.com | dotnetcr.com | GitHub
Roy Rojas
Roy Rojashttp://www.dotnetcr.com
Con más de 20 años de experiencia en programación, experto en lenguajes .NET, VB, C#, ASP.NET, Xamarin, XCode, DBA en SQL Server. Creador de dotnetcr.com, sitio web para programadores en español. royrojas.com | dotnetcr.com | GitHub