CSS Div Placement ao recriar o site

Question

Estou recriando este site da Associação Americana de Faculdades Comunitárias visualizável aqui, e tenho feito tudo bem até agora, mas encontrei um problema ao colocar uma div por uma imagem (você pode ver meu WIP e código completo aqui). Ele tem que lidar especificamente com a barra lateral. Como você pode ver na página real, há uma lacuna entre o cabeçalho e a bandeira/barra lateral. No entanto, na minha página da web, pude criar a margem entre a imagem e a banner, mas a barra lateral (independentemente do que eu faço) não replicará em lugar nenhum os sites reais.

Eu estava usando a tela: Block Inline no meu CSS e li que, ao usar esta tag, quaisquer especificações de margem serão ignoradas. Eu queria saber quais seriam quaisquer alternativas em potencial, pois não quero estragar o posicionamento (a página permanece centrada, independentemente do tamanho da janela, e eu gostaria de mantê -lo assim!) Por isso não usei Float: etiqueta direita na divisão "barra lateral". Quaisquer sugestões para melhorar melhor o código serão apreciadas! Aqui está o código CSS em questão, caso você não queira ir à minha página e visualizar o código -fonte:

#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

Eu colocaria as divis da barra lateral e da bandeira dentro de uma 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; }

Aqui está um jsfiddle.