CSS Div Placement عند إعادة إنشاء موقع الويب

Question

أقوم بإعادة إنشاء موقع الرابطة الأمريكية لكليات المجتمع يمكن عرضه هنا, ، وكانت بخير حتى الآن ، ولكن واجهت مشكلة عند وضع Div بواسطة صورة (يمكنك عرض WIP والرمز الكامل هنا). على وجه التحديد للتعامل مع الشريط الجانبي. كما ترون من صفحة الويب الفعلية ، هناك فجوة بين الرأس والشريط الجانبي/الشريط الجانبي. ومع ذلك ، على صفحة الويب الخاصة بي ، تمكنت من إنشاء الهامش بين الصورة والشعيرات ، لكن الشريط الجانبي (بغض النظر عن ما أقوم به) لن يكرر مواقع الويب الفعلية في أي مكان.

كنت أستخدم الشاشة: كتلة مضمنة في CSS الخاصة بي ، وقرأت أنه عند استخدام هذه العلامة التي سيتم تجاهل أي مواصفات الهامش. كنت أتساءل عن أي بدائل محتملة ستكون ، لأنني لا أريد أن أفسد تحديد المواقع (تظل الصفحة مركزية بغض النظر عن حجم النافذة ، وأود أن أبقيها على هذا النحو!) وهذا هو السبب في أنني لم أستخدم تعويم: العلامة اليمنى على "الشريط الجانبي" 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 المحتوية.

#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.