Progreso: Mi CSS

[MMCQ]

Hola! como estan?

hace unas semana puse una imagen en photoshop que hice de como queria que fuera mi pagina. ahora posteo para que vean el progresos de las misma y para que me ayuden a resolver algunos problemitas..

asi era como queria que saliera

y haci es como me esta saliendo ahora tengo el 70% del CSS , el otro 30% estoy pensando como hacerlo ya que tengo algunas dudas.




Ahi mismo le ppresento el problemita que tengo ese Deslizamiento que tiene, deseo que este aliniado con el header.

aqui les dejo el CSS.

#CONTAINER {
background-color:#FFF;
//*border-style:solid;
border-color:#000000;*//
margin: 0 auto;
width:790px;
height:auto;
}

.header{

width:790px;
height:133px;
background-color:#fff ;
margin:0 0 10px 0;
}

.barra{
background-image:url(images/barra.gif);
background-repeat: no-repeat;
width:790px;
height:30px;
background-color:#fff;

margin:0 auto;
}





.izquierda{
width:460px;
height:auto;
background-color:#FFFFFF;
margin:0 auto;
float:left;
color: #FFF;
padding:3px;



}

.izslide{
width:460px;
height:225px;


}
.izpubli{
width:460px;
height:45px;
margin:0 auto;
}

.derecha{
width:310px;
height:auto;
background-color:#fff;
margin:0 auto;
float:right;
color: #FFF;
padding:3px;


}
.izmenu{
width:310px;
height:150px;
border-bottom: 2px solid #F7F7F7;
border-left: 2px solid #F7F7F7;
border-right: 1px solid #F7F7F7;


}

.busqbox{
float:right;
margin: 3px 3px;


}
.loginbox{
float:left;
margin: 2px 2px;

}

ul {
padding:0px;
margin:0px;
width:100%;
color:#333;
}
ul li {
width:100%;
float:left;
margin:0 0 5px 0 ;
}
.lista_izquierda{

float:left;
width:130px;
font: 12px Arial, Helvetica, sans-serif;
border-right: 1px dotted #CFCFCF ;
padding:3px;




}

ul a {
text-decoration: none;
color: #333;
background: #FFF;
display: block;
padding: 3px 6px;
width: 138px;

}
ul a:hover {
background: #FF0000;
color:#fff;

}
ul a:visited {
color:#33333;
}
ul a:active {
color:#333333;
}
.lista_derecha{
float:right;
width:130px;
font: 12px Arial, Helvetica, sans-serif;


}
.sep{
margin:5px;


}
.ssep{
margin:15px;


}
.img-menu{
margin: 0 0 0 5px ;
}

.izpubli2{
width:300px;
height:105px;

}
.noticias_iz{
float:left;
width:250px;


}
.ultima_iz{
float:right;
width:190px;
margin-left:5px;



}
.eventos_iz{
float:left;
width:280px;
margin-left:10px;








}

aqui el HTML

<div class="izquierda">
<div class="izslide">
<img src="images/slide.gif"width="460" height="225"></div>
<div class="sep"></div>
<div class="izpubli">
<img src="images/publi.gif"width="460" height="45"></div>
<div class="ssep"></div>

<div class="noticias_iz">
<h1>Noticias</h1>
</div>
<div class="ultima_iz"><img src="images/ultima.gif"width="195" height="190"></div>

</div>

<div class="derecha">

<div class="izmenu">
<div class="img-menu"><img src="images/menu.gif"width="151" height="18"></div>


<div class="sep"></div>
<ul id="lista_izquierda" class="lista_izquierda">
<li><a href="r/2h">Inicio</a></li>
<li><a href="r/25">Features</a></li>
<li><a href="r/28">Noticias</a></li>
<li><a href="r/44">Foros</a></li>
<li><a href="r/2r">Chat</a></li>
</ul>
<ul id="lista_derecha" class="lista_derecha">
<li><a href="r/2h">Eventos</a></li>
<li><a href="r/25">Videos</a></li>
<li><a href="r/28">Registrate!</a></li>
<li><a href="r/44">Blog</a></li>
<li><a href="r/2r">Contacto</a></li>
</ul>
</div>
<div class="sep"></div>

<div class="izpubli2">
<img src="images/banner.gif"width="315" height="104"></div>
</div>
<div class="sep"></div>
<div class="eventos_iz">
<h1> Eventos </h1>
</div>
</div>
</div>

</body>
</html>

[Rafael]

Perdón, me dió un poco de flojera leer. :)

Abajo del encabezado puedes meter tooodo en un div y ajusta o el margin o el padding de la izquierda.