Расположение CSS Div при воссоздании веб -сайта

Question

Я воссоздаю этот веб -сайт Американской ассоциации общественных колледжей можно просматривать здесь, и до сих пор все в порядке, но столкнулись с проблемой при размещении DIV на изображение (вы можете просмотреть мой WIP и полный код здесь) Это специально должно иметь дело с боковой панелью. Как вы можете видеть на реальной веб -странице, между заголовком и баннером/боковой панелью существует разрыв. Однако на моей веб -странице я смог создать маржу между изображением и баннером, но боковая панель (независимо от того, что я делаю) нигде не будет повторять фактические веб -сайты.

Я использовал дисплей: Inline Block в моем CSS, и я читал, что при использовании этого тега любые характеристики маржи будут игнорироваться. Мне было интересно, какими будут любые потенциальные альтернативы, так как я не хочу испортить позиционирование (страница остается центрированной независимо от размера окна, и я хотел бы сохранить его таким образом!) Вот почему я не использовал Float: правая метка на «боковой панели» div. Любые предложения по улучшению улучшения кода будут оценены! Вот рассматриваемый код CSS, если вы не хотите перейти на мою страницу и просмотреть исходный код:

#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

Я бы поместил боковую панель и баннер DIV в содержащий 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; }

Вот jsfiddle.