Maquetar nuestra página con CSS y Divs

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.

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 es el siguiente:


#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

Comentarios (9)

  • Armando G. Responder

    Muy util este ejemplo, siempre trato utilizar los divs en mis páginas, aunque en oncasiones se me complica porque estoy acostumbrado a utilizar las tablas. Gracias por el ejemplo

    Wednesday, August 7, 2013 9:46 AM
    • José I. Estrada Hdz Responder

      Que bueno Armando que te fue de utilidad el ejemplo y gracias por tus comentarios.

      8/7/2013 3:37:56 PM
  • Roberto Responder

    Me ayudarias a crear la abecera tal como esta en esta pagina? isc.rhm(arroba)gmail(punto)com

    Wednesday, August 26, 2015 8:19 PM
    • Estrada WebGroup Responder

      Hola Roberto en si que es lo que necesitas, un menú en HTML? podrias explicarme un poquito más y con gusto te apoyo. Saludos

      9/2/2015 10:11:46 AM
  • Isabel Responder

    Hola, se pueden poner bordes degradados o sombras a los cuadros div ?.

    Wednesday, February 3, 2016 10:55 PM
  • Grover Cristobal Responder

    hola amiguita Isabel, claro q si se puede, aunque yo he probado con sombras, más no con bordes degradados eh !!

    Wednesday, February 10, 2016 8:02 PM
  • ebyhgan Responder

    hola que tal? quiero que cuando se desplegue el menu la lista que se desplega quiero que cambie de color , o sea no cuando le paso el puntero sino q ejemplo la lista principal sea blanca y la q se desplega negra y cuando pase el puntero sea ejemplo amarillo... como le hago?

    Friday, May 27, 2016 4:49 PM
  • ebyhgan Responder

    hola que tal? quiero que cuando se desplegue el menu la lista que se desplega quiero que cambie de color , o sea no cuando le paso el puntero sino q ejemplo la lista principal sea blanca y la q se desplega negra y cuando pase el puntero sea ejemplo amarillo... como le hago?

    Friday, May 27, 2016 4:56 PM
  • Guillermo Responder

    te dejo una inquietud. necesito hacer algo muy parecido a tu ejemplo, pero con la cabecera y el pie de un alto fijo. ¿se puede? y que al igual que en tu ejemplo, si el contenido es mas chico que el alto del navegador, igualmente el pie quede abajo de todo.

    Friday, August 12, 2016 8:25 AM

Animate deja un comentario!!!

Eres un humano?

Últimos Tweets

Contáctanos

  • Dirección: Plutarco Elias Calles 243, Granjas México, Iztacalco, DF.

  • Teléfono:55-2712-3820 o 55-4164-9484

  • Email: info@developerji.com