CSS Div Placement lors de la recréation du site Web

Question

Je recrée ce site Web de l'American Association of Community Colleges Visurée ici, et vous avez bien fonctionné jusqu'à présent, mais vous avez rencontré un problème lors de la mise en place d'un div par une image (vous pouvez afficher mon WIP et terminer le code ici). Il doit spécifiquement faire face à la barre latérale. Comme vous pouvez le voir sur la page Web réelle, il existe un écart entre l'en-tête et la bannière / barre latérale. Cependant, sur ma page Web, j'ai pu créer la marge entre l'image et la bannière, mais la barre latérale (peu importe ce que je fais) ne reproduira nulle part les sites Web.

J'utilisais l'affichage: le bloc en ligne dans mon CSS, et je lis que lorsque vous utilisez cette balise, les spécifications de marge seront ignorées. Je me demandais quelles seraient toutes les alternatives potentielles, car je ne veux pas gâcher le positionnement (la page reste centrée, quelle que soit la taille de la fenêtre, et je voudrais le garder ainsi!) C'est pourquoi je n'ai pas utilisé float: étiquette droite sur la "barre latérale" div. Toutes les suggestions pour mieux améliorer le code seront appréciées! Voici le code CSS en question, au cas où vous ne voudrez pas aller sur ma page et afficher le code source:

#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

Je placerais la barre latérale et la bannière Divs au sein d'une div contenant.

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

#content {
    margin: 10px; }

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

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

Voici un jsfiddle.