Ayuda con diseño con DIVs y CSS

anjovi4 · #1 (**permalink**) 13/08/2009, 17:07

Hola gente del foro. Antes comienzo con decirles que soy programador y que en el diseño estoy algo virgen. He hecho algunos diseños con tablas pero ahora quiero aprender esto de diseñar en DIVs.
Bueno al grano. Tengo una pagina con la siguiente estructura:
- Cabecera
- Lado Izquierdo
- Lado Centro
- Lado Derecho
- Pie

Me sale bien pero el problema es que si el contenido de [Lado Centro] es menor al de [Lado Izquierdo] o [Lado Derecho], estos se quedan por encima de [Lado Pie].
No se si me entienden pero aqui les dejo el codigo para que lo revisen.

Este es el codigo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Maquetaci&oacute;n con DIVs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
p{font:11px Verdana, Arial, Helvetica, sans-serif; color:#586885; line-height:120%;}
hr{display:none;}
h1{font:25px Verdana, Arial, Helvetica, sans-serif; text-align:left; color:#666666; margin:0px;}
h2{font:bold 20px Verdana, Arial, Helvetica, sans-serif; text-align:left; color:#486895; text-transform:capitalize;}
h3{font:18px Verdana, Arial, Helvetica, sans-serif; text-align:left; color:#666666;}
h4{font:bold 15px Verdana, Arial, Helvetica, sans-serif; text-align:left; color:#666666;}
h5{font:10px Verdana, Arial, Helvetica, sans-serif; text-align:center; text-transform:uppercase; margin:5px auto; ; color:#666666;}
a{font-size:12px; color:#325FA0;}
a:link{text-decoration:none;}
a:visited{text-decoration:none; color:#325FA0;}
a:hover{text-decoration:none; color:#000066;}
a:active{text-decoration:none; color:#0099CC;}
body{margin:0;background-color: #FFFFFF; text-align:center; line-height:10px;}
#contenedor{width:777px; height:auto; background-color: #DDE6AC; border-width:1px; border-style:solid; border-color:#000000; margin:0 auto; text-align:left;}
.cabecera{width:777px; height:140px; background-color:#CC9933; border-bottom-style:solid; border-bottom-color:#000000; margin:0 0 10px 0;}
.izquierda{width:100px; height:auto; background-color:#EFEFEF; border-style:solid; border-width:1px; border-color:#000000; margin:0 0 0 5px; float:left; padding:3px;}
.izquierda ul{font:11px Verdana, Arial, Helvetica, sans-serif; color:#586885; text-transform:capitalize;}
.izquierda ul li{margin:0 0 0 -20px; line-height:160%;}
.derecha{width:150px; height:auto; background-color:#FFFFDD; border-style:solid; border-width:1px; border-color:#000000; margin:0 5px 0 0; float:right; padding:5px; text-align:justify;}
.principal{width:465px; height:auto; background-color:#FFFFFF; border-style:solid; border-width:1px; border-color:#000000; margin:0 5px 0 118px; padding:10px;}
.pie{width:auto; height:30px; background-color:#FFFFFF; border-style:solid; border-width:1px; border-color:#000000; margin:5px;}
.pie h6{text-align:center; text-transform:uppercase; margin:5px auto; color:#666666; font:bold 10px Verdana, Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
  <div id="contenedor">
    <div class="cabecera">
	  <h1>WEB 2.0</h1>
    </div>
    <div class="izquierda">
      <h4>Categorías</h4>
      <ul>
        <li>Vinculo</li>
        <li>Vinculo</li>
        <li>Vinculo</li>

        <li>Vinculo</li>
        <li>Vinculo</li>
        <li>Vinculo</li>
        <li>Vinculo</li>
        <li>Vinculo</li>
        <li>Vinculo</li>

        <li>Vinculo</li>
        <li>Vinculo</li>
        <li>Vinculo</li>
        <li>Vinculo</li>
        <li>Vinculo</li>
      </ul>

    </div>
    <div class="derecha">
      <h3>1º Noticia</h3>
      <p>Aquí se podría colocar una imágen, anuncios, más vínculos, las típicas imagenes de Sindicar RSS, odio a neo_jp, etc...</p>
      <h3>2º Noticia</h3>
      <p>Aquí se podría colocar una imágen, anuncios, más vínculos, las típicas imagenes de Sindicar RSS, odio a neo_jp, etc...</p>
      <h3>3º Noticia</h3>

      <p>Aquí se podría colocar una imágen, anuncios, más vínculos, las típicas imagenes de Sindicar RSS, odio a neo_jp, etc...</p>
    </div>
    <div class="principal">
      <h2>Título del contenido</h2>
      <h3>1º Sub apartado</h3>
      <p>Escribo algo para rellenar...</p>
      <p>Escribo algo para rellenar...</p>
      <h3>2º Sub apartado</h3>
      <h4>Otra seccion más pequeña</h4>
      <p>Escribo algo para rellenar...</p>
      <p>Escribo algo para rellenar...</p>
    </div>
    <div class="pie">
      <h5>Pie de pagina de la web. Todo el C_C reservado</h5>
    </div>
  </div>
</body>
</html>

Quisiera saber si estoy haciendolo bien. Otra pregunta que tambien queria realizarles es que si existe alguna diferencia importante entre indicar un estilo con class o id.

Bueno de antemano las gracias.

deirdre · #2 (**permalink**) 13/08/2009, 19:35

Hola anjovi4

Seguro, seguro que este ejemplo de nuestro querido Mikmoro te puede ayudar mucho para ajustar tu diseño:

Enlace

Bye

kseso? · #3 (**permalink**) 14/08/2009, 05:39

Hola Anjovi4, eso se suele conocer como columnas equilibradas o falsas columnas

anjovi4 · #4 (**permalink**) 17/08/2009, 21:31

Gracias deirdre y kseso?. Ahora lo pruebo y les escribo como me va.