A ver si te sirve este ejemplillo:
Código HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Estilos CSS</title>
<style type="text/css">
<!--
body {
background-color: #FF9900;
}
.todo {
background-color: #999999;
position: relative;
text-align: center;
width: 50%; /* 50% del <body> */
}
.todo h2 {
font-family: "Times New Roman", Times, serif;
color: #660000;
padding: 0px 0px 10px 0px;
border-bottom-color: #333333;
border-bottom-style: solid;
border-bottom-width: medium;
margin-bottom: 10px;
}
.izquierda {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #990000;
background-color: #CCCCCC;
text-align: justify;
position: relative;
width: 20%; /* 20% del bloque "todo" */
float: left;
height: 200px;
margin-left: 5%;
margin-right: 2%;
padding: 5px 5% 5px 5%;
}
.derecha {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF9900;
background-color: #000066;
position: relative;
width: 20%; /* 20% del bloque "todo" */
float: right;
height: 200px;
padding: 5px 5% 5px 5%;
margin-right: 5%;
margin-left: 2%;
}
.azul {color: #000066}
-->
</style>
</head>
<body>
<div class="todo">
<h2>Contenido de etiqueta <h2> en capa "todo"</h2>
<div class="izquierda">Contenido de capa "izquierda", y un <span class="azul">trozo
de texto que ponemos en color azul</span>. </div>
<div class="derecha">Contenido de capa "derecha"</div>
</div>
</body>
</html> Fíjate sobretodo en el float, los margin, padding, y width. Ten en cuenta algo importante para maquetar y que te cuadren los bloques DIV en su sitio: Has de tener presente que el margen entre bloques, y el "padding" o separación entre el borde del bloque y el contenido, no cuentan dentro del ancho total que des a un bloque. O sea, que si lo haces en términos relativos como en este caso, reparte porcentajes para los anchos de los bloques "izquierda" y "derecha", y también para los márgenes que les he dado, y los rellenos de celda horizontales, o si no, los bloques se descuadran y aparece uno más abajo que otro.
Si lo haces en absoluto, reparte los píxeles del mismo modo.
Otra cosa. P.ej:
padding: 5px 5px 5px 5px;
equivale a:
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
solo que la primera opción es aceptada por navegadores antiguos, y la segunda puede que no.
Si se puede mejorar el ejemplo de alguna forma, sería de agradecer que lo expusierais. Siempre se puede aprender más.
ciao!