Maquetar nuestra página con CSS y Divs

Estrada Web Group
Estrada Web Group
Maquetar nuestra página con CSS y Divs

La maquetación con CSS y Divs es el tipo de maquetación más utilizado en la actualidad en las páginas web. En la edad de piedra se maquetaba con tablas, práctica que no recomiendo en absoluto. Las tablas son para presentar datos de una manera ordenada, no para maquetar una página web.

Maquetar con css y div

En este artículo voy a explicar cómo modelar una página con una cabecera, un menú, dos columnas y el píe de página.

Como se puede observar el diseño de esta formado por una cabecera, un menú, dos divs flotando uno a la derecha y otro a la izquierda y un pie de página.

Para realizar este diseño se necesitan dos ficheros, uno HTML y uno CSS. A continuación puedes ver el código HTML. Es realmente sencillo. Hay seis divs en total de los cuales uno contiene a los otros cinco y dos de ellos están flotando a la derecha y a la izquierda respectivamente.

El código del fichero HTML sería el siguiente

<html>
	<head>
		<title>Maquetacion con CSS y Divs</title>
		<link rel="stylesheet" href="maquetacion.css" type="text/css"/>
	</head>
	<body>
		<div id ="contenedor">
			<div id ="cabecera"></div>
			<div id ="menu"></div>
			<div id ="izquierda"></div>
			<div id ="derecha"></div>
			<div id ="pie"></div>
		</div>
	</body>
</html>

El código CSS

#contenedor{
        background-color:#F4ABF2;
        border:2px solid #FF0000;
}
#cabecera{
        background-color:#E5BC7A;
        height:20%;
}
#menu{
        height:10%;
        background-color:#C8CACC;
}
#izquierda{
        height:50%;
        background-color:#BDD2EF;
        float:left;
        width:50%;
}
#derecha{
        height:50%;
        background-color:#DAF7E2;
        float:right;
        width:50%;
}
#pie{
        height:20%;
        background-color:#D3D1C1;
        clear:both;
}

Si tienes algún problema para implementar este ejemplo, escríbeme y en seguida te responderé.

Compartir artículo:

Más artículos geniales

Aprende a integrar pagos con PayPal en ASP.NET Core: Cómo incluir botones de pago PayPal inteligente en mi página web

Aprende a integrar pagos con PayPal en ASP.NET Core: Cómo incluir botones de pago PayPal inteligente en mi página web

En este artículo te enseñare a incluir tus primeros botones de pago de PayPal para utilizarlo en ASP.NET Core para recibir pagos en tu página web

Ver artículo completo
Modelos en Entity Framework Core: La clave para una base de datos potente

Modelos en Entity Framework Core: La clave para una base de datos potente

Descubre cómo crear y utilizar modelos en Entity Framework Core para transformar tus datos en acción. Aprende los conceptos clave de la creación de modelos, su importancia en el desarrollo y cómo mantener la coherencia con migraciones. Empodera tus aplicaciones con esta guía práctica.

Ver artículo completo
Cifrar y descifrar contraseñas o cadenas de texto en C#

Cifrar y descifrar contraseñas o cadenas de texto en C#

Encriptar o cifrar y descifrar contraseñas o cadenas de texto utilizando una clave simétrica en C #

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla