CSS -Divid -Platzierung beim Nachbau der Website

Question

Ich erprobiere diese Website der American Association of Community Colleges hier zu sehen, und habe es bisher in Ordnung gemacht, aber ein Problem bei der Platzierung eines DIV durch ein Bild (Sie können meinen WIP und den vollständigen Code anzeigen hier). Es muss sich speziell mit der Seitenleiste befassen. Wie Sie auf der tatsächlichen Webseite sehen können, gibt es eine Lücke zwischen dem Header und der Banner/der Seitenleiste. Auf meiner Webseite konnte ich jedoch den Rand zwischen Bild und Banner erstellen, aber die Seitenleiste (unabhängig von dem, was ich tue) wird die tatsächlichen Websites nirgends wiederholen.

Ich habe das Display verwendet: Inline-Block in meinem CSS, und ich habe gelesen, dass bei Verwendung dieses Tags, dass alle Randspezifikationen ignoriert werden. Ich habe mich gefragt, was potenzielle Alternativen sein würden, da ich die Positionierung nicht durcheinander bringen möchte (die Seite bleibt unabhängig von der Fenstergröße zentriert, und ich möchte sie so behalten!), Deshalb ich nicht benutzt habe Float: Rechts Tag auf der "Seitenleiste" Div. Alle Vorschläge zur besseren Verbesserung des Codes werden geschätzt! Hier ist der fragliche CSS -Code, falls Sie nicht zu meiner Seite gehen und den Quellcode anzeigen möchten:

#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

Ich würde die Seitenleiste und die Banner -Divs in eine Div -enthaltende Div -Div -Divie platzieren.

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

#content {
    margin: 10px; }

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

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

Hier ist ein jsfiddle.