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