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é.

Artículos relacionados
11 Comentarios
  • Armando G. Comentar
    Wednesday, August 7, 2013

    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

  • Roberto Comentar
    Wednesday, August 26, 2015

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

    • Estrada WebGroupComentar
      Wednesday, September 2, 2015

      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

  • Isabel Comentar
    Wednesday, February 3, 2016

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

  • Grover Cristobal Comentar
    Wednesday, February 10, 2016

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

  • ebyhgan Comentar
    Friday, May 27, 2016

    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?

  • ebyhgan Comentar
    Friday, May 27, 2016

    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?

  • Guillermo Comentar
    Friday, August 12, 2016

    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.

  • elcholoescuinqle Comentar
    Monday, March 12, 2018

    che pagina culera

  • tuputamadr Comentar
    Monday, March 12, 2018

    me la pelan PUTO EL QUE LO LEA

  • elperroperron Comentar
    Monday, March 12, 2018

    AYER ME HECHE A TU JEFA PINCHE PUERCO XD

  • aa Comentar
    Thursday, November 29, 2018

    no corre tú código

Enviame un comentario