Dudas con maquetacion

[dvd_alon]

Estoy aprendiendo CSS de forma autodidacta, y en mi primer proyecto he queria hacer algo como lo de la imagen (los recuadros son capas).
Tengo todo mas o menos hecho. No se si bien. Es lo primero que queria preguntar ¿esta todo bien? ¿Hay alguna cosa sin sentido? ¿Aunque "funcione", se deberia hacer de otra forma? ¿la nomenclatura de las capas es liosa? etc etc et cualquier sugerencia sera bien recibida.

Y la segunda cosa, la cabecera y el pie, que pensaba que no me iba a da ninguna guerra, el ponerlos me descuadra todo, ¿podriais decirme como es?



El css:

Código:

#contenedor {
   margin:0px auto;  
   padding: 0px;
   width:960px;
   border-style:solid;
}

#contenedor2 {
	display: table; 
	width: 705px;
	margin: auto;
	margin-top: 50px;
}

#columnaFiltros{
	float:left;
	width:155px;
	background-color:orange;
	margin: 0px;
	padding: 0px;
	height: 376px;/*306px; /* los 6px es por el borde del grafica2*/
	font-family: 'Comic Sans MS', cursive;
	color:#4c4483;
	text-align:left;
}
		
#contenido{
	float:right;
	width:544px;
}
#grafica2 {
	width:544px;
	height: 300px; 
	display: table-cell; 
	vertical-align: middle;
	border-style:solid;
}

#grafica3 {
	position: relative;
	margin: 10px 10px 10px 10px;
	padding: 0px;
	}

		
#votacion{
	clear:both;
	margin: 0px;
	padding: 0px;
	width:544px;
	height: 70px;
}

[madhatterdef]

buen diseño ahora lo reviso mejor y te digo

[madhatterdef]

perdón por la tardanza aquí el código con mis sugerencias

Código:

#cabecera {
    padding: 0px;
    height: 50px;
    border: solid;
    margin-bottom: 5px;
}
#pie {
    margin:0px auto;
    padding: 0px;
    clear: both;
    border: solid 1px;
    margin-top: 5px;
}
#contenedor {
    margin:0px auto;
    padding: 0px;
    width:960px;
    border: solid 1px;
}

#contenedor2 {
    width: 705px;
    margin: auto;
}

#columnaFiltros{
    float:left;
    width:155px;
    background-color:orange;
    padding: 0px;
    height: 376px;/*306px; /* los 6px es por el borde del grafica2*/
    font-family: 'Comic Sans MS', cursive;
    color:#4c4483;
    text-align:left;
    border: solid 1px;
}
        
#contenido{
    float:right;
    width:544px;
    border: solid 1px;
}
#grafica2 {
    width:544px;
    height: 300px;
    vertical-align: middle;
}

#grafica3 {
    position: relative;
    margin: 10px 10px 10px 10px;
    padding: 0px;
    }

        
#votacion{
    clear:both;
    margin: 0px;
    padding: 0px;
    width:544px;
    height: 70px;
    border: solid 1 px;
}