Hola m0m0o, te cuento lo que encontré mal estructurado en el código que has puesto en tu pregunta.
errores que encontré: - el DIV #contenido no tenia un ancho específico.
- el DIV #contenido no estaba flotado a la derecha.
- El texto que introdujiste en el DIV contenido dentro de la etiqueta <p> genera su propio padding y su propio mergin, por ser una etiqueta de bloque. Y esto también puede generarte un espacio pero en la parte interior.
Soluciones: - dar un ancho específico el DIV contenido le e colocado 570px.coloque un padding de 10px para que el texto no se pegue al borde del div #contenido
- Flotar el DIV #contenido a la derecha en vez de empujarlo con el marginleft.
Concejos: - no use span para crear menú, es preferible usar listas desordenadas <ul>, te lo e dejado como lo tenias pero te aconsejo use listas es mas manejable.
- Trata de trabajar siempre con hojas de estilos (css) externas, Así tendrás mejor organizado tu documento.
En fin se pueden mejorar muchas cosas pero ya esta bien para no marearte...
aquí te dejo el código editado.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home - Inicio</title>
<style type="text/css">
html, body, h1 { margin:0px; padding:0px;}
body { font-family:Arial, Helvetica, sans-serif; font-size:12px; background:#FFFFFF; color:#666666}
#contenedor { margin:auto; width:800px;}
#cabecera { height:100px; background:#FF0066}
#banner{
height:60px;
background:#33CCCC;
clear: both;
}
#sidebar{
float:left;
width:210px;
background:#FFFF00;
}
#contenido {
background:#006600;
float: right;
padding:10px;
}
#pie { height:30px; clear:both; font-family:Tahoma, Arial, Helvetica, Sans-serif; font-size:10px; color:#c9c9c9; border-top:1px solid #efefef; padding:13px 25px; line-height:18px; background:#66FF00}
#pie a { text-decoration:none; color:#c9c9c9;}
#pie a:hover { color:#db6d16;}
.navigation {
font-family: Verdana, sans-serif;
font-size:12px;
font-style: normal;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color: #49C0F0;
display: block;
width: 180px;
border:1px solid #c2f1ff;
padding:8px;
}
.navigation:hover { font-family: Verdana, sans-serif;font-size: 12px;font-style: normal;font-weight: bold;color: #fff;text-decoration: none;background-color: #258fcd;display: block;width: 198px;border:1px solid #c2f1ff;}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera"><h1>cabecera</h1></div>
<div id="banner">marquesina</div>
<div id="sidebar">
<span class="navigation"><a href="#">Link</a></span>
<span class="navigation"><a href="#">Link</a></span>
<span class="navigation"><a href="#">Link</a></span>
<span class="navigation"><a href="#">Link</a></span>
</div><!--END DIV ID SIDBAR-->
<div id="contenido">
<h1>Este div no lo flotaste a la derecha.</h1>
<p> </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur laoreet risus quis magna porta eu suscipit justo euismod. Nam quam lacus; vulputate sed rhoncus sit amet, pellentesque nec felis. Duis viverra enim eget tellus fringilla et accumsan dolor luctus? In eget nisi rutrum libero auctor lacinia eget non justo. Sed tincidunt nibh velit, sed pharetra mauris. Maecenas cursus porttitor bibendum. Nam nec felis vel ligula congue gravida. Fusce feugiat orci ac quam laoreet ut mollis ipsum lobortis. Donec vehicula, felis sit amet pharetra sollicitudin; purus libero laoreet diam, non consectetur sapien justo vel ligula. Praesent bibendum magna a risus elementum tempus eu nec purus. Integer vestibulum mauris quis dolor pretium dapibus. Integer mollis, tortor quis accumsan adipiscing, augue enim posuere quam; tincidunt vestibulum erat magna ut enim. Aenean lectus arcu, faucibus sit amet tincidunt laoreet; auctor nec velit. Fusce molestie, erat ut tristique tempor, diam nunc faucibus massa, quis mollis ipsum dui quis massa. Curabitur pretium fringilla quam sed pretium. Phasellus molestie scelerisque libero, vitae mollis mauris suscipit a. Nullam malesuada ante id purus accumsan blandit! Cras eu consectetur erat.
</p>
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed enim vel tellus venenatis posuere. Duis gravida pulvinar ligula, eget viverra orci condimentum ut! Nulla neque erat, dignissim in consectetur ac, placerat commodo lectus. Mauris lacus dui, posuere vel adipiscing ut, elementum quis tellus. Sed tempor varius rhoncus. Praesent vitae nibh quis nisl facilisis ornare vestibulum dapibus leo. Donec tempor est at lacus consectetur ac hendrerit velit tincidunt! Donec adipiscing ultrices erat at eleifend. Etiam vestibulum nulla non odio tempor eu consectetur dui sagittis. Duis turpis justo, tincidunt vel adipiscing ac, auctor sit amet orci. Maecenas ac pellentesque dui. Donec sit amet justo tincidunt dolor placerat consectetur. Pellentesque quis lorem in tortor suscipit dignissim et quis ipsum. Aliquam non nisl tincidunt nisi iaculis scelerisque eu quis ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras non mauris euismod turpis tempus iaculis sit amet a leo. Integer imperdiet sagittis lectus sit amet interdum? Nulla facilisi. Nunc dui odio; fermentum eu accumsan non, tristique vitae augue.
</p>
<p>
Etiam sem erat, facilisis ac auctor a, laoreet at nibh. Quisque at metus eu quam dignissim pretium nec vitae leo. Duis luctus urna ut odio ultrices aliquet. Aenean fermentum dignissim accumsan. Curabitur orci ante, ultricies at ultrices non; varius a magna. In hac habitasse platea dictumst. Sed vel pulvinar turpis. Curabitur eget nibh in elit dictum pellentesque. Etiam at faucibus massa. Nulla lobortis magna eget nisl rhoncus a suscipit magna elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean elementum vulputate elit ut pretium. Aenean fermentum pulvinar luctus. Duis non semper leo. Sed nisi massa, adipiscing at ornare a, aliquet non metus. Nullam vitae nisl est, id eleifend justo. Morbi lacinia, nibh in placerat euismod, felis tellus dignissim elit, commodo laoreet erat purus nec tellus. Quisque eu nibh sit amet nunc posuere commodo. Vestibulum et sem odio, nec dignissim odio. Integer malesuada leo vitae metus lobortis ut eleifend nulla tempus?
</p>
</div>
<div id="pie"></div>
</div>
</body>
</html> 