Hola tp zurdo,
Veo que maquetas como si estuvieras usando tablas, anidas una división dentro de otra división para que te de un margen, en css tenemos "padding", que bien sirve para lo que buscas, aquí te pongo un breve cambio que le hice a tu css y a tu html, además para que la barra lateral siga hacia abajo se usa una imagen de fondo que crea ese efecto; no tienes porque ser dueño de todo el layout, solo tienes que decirle como comportarse.
Por cierto, también tienes que usar un DOCTYPE que te valide el documento.
Saludos
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>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #000000;
margin: 0;
padding: 0px;
}
#container {
background-color: #00FF33;
width: 800px;
margin: 0 auto;
padding:0 10px;
position: relative;
}
#encabezado {
font-weight: bold;
height: 150px;
color: #FFFFFF;
background-color: #9900FF;
position: relative;
padding: 5px;
}
#contenido {
font-weight: bold;
color: #666666;
background-color: #FFFFFF;
width: 66%;
margin-left: 30%;
text-align: justify;
padding: 2%;
}
#lateral {
background-color: #993333;
float: left;
width: 30%;
}
#pie {
padding: 1.5%;
height: 50px;
background-color: #999999;
}
.logotipo {
margin:auto;
color: #FFFFFF;
background-color: #000066;
float: left;
}
#encabezado ul {
margin: 0;
margin-left: 26%;
position: absolute;
bottom: 5px;
}
#encabezado li {
display: inline;
}
#encabezado li a {
margin: 2.5px;
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="encabezado">
<div class="logotipo">LOGOTIPO</div>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">QUIENES SOMOS</a></li>
<li><a href="#">DESCARGAS</a></li>
<li><a href="#">CONTACTO</a></li>
<li><a href="#">SARASA</a></li>
</ul>
</div>
<div id="lateral">ACA VA ILUSTRACION</div>
<div id="contenido">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </div>
<div id="pie">fdgdfhdfhfgdfgdfg</div>
</div>
</body>
</html>