Colocación de CSS Div Al recrear el sitio web

Question

Estoy recreando este sitio web de la Asociación Americana de Colegios Comunitarios Visable aquí, y lo he estado bien hasta ahora, pero me he encontrado con un problema al colocar un DIV por una imagen (puede ver mi WIP y completar el código aquí). Específicamente tiene que lidiar con la barra lateral. Como puede ver en la página web real, hay una brecha entre el encabezado y el banner/barra lateral. Sin embargo, en mi página web, pude crear el margen entre la imagen y el banner, pero la barra lateral (independientemente de lo que haga) no se replicará los sitios web reales.

Estaba usando la pantalla: bloque en línea en mi CSS, y leí que al usar esta etiqueta se ignorará cualquier especificación de margen. Me preguntaba cuál sería cualquier alternativa potencial, ya que no quiero estropear el posicionamiento (la página se mantiene centrada independientemente del tamaño de la ventana, ¡y me gustaría mantenerlo así!) Por eso no usé FLOAT: Etiqueta derecha en la div. "Barra lateral". ¡Se agradecerá cualquier sugerencia para mejorar mejor el código! Aquí está el código CSS en cuestión, en caso de que no quiera ir a mi página y ver el código fuente:

#header {width:970px; height:105px; position:absolute; top: 0px; background-color:#C0C0C0;}

#navbar{text-align:right;}
#navbar a{text-decoration:none; color:#787878;}

#logoalign{vertical-align:bottom;}

#banner {float:left; display:inline-block; width:730px; padding-top:105px; margin-top:10px}

#sidebar{display:inline-block; padding-top:110px; margin-top:10 px; width: 240px; height:700px; background-color:#33FF33}

Answer 1

Colocaría la barra lateral y los divs de banner dentro de un div.

#navbar{
    margin: 0px 10px;
    width: 610px;
    height: 50px; }

#content {
    margin: 10px; }

#banner {
    float: left;
    width: 400px; }

#sidebar {
    margin-left: 410px; 
    width: 200px;
    height: 500px; }

Aquí está un jsfiddle.