I'm recreating this American Association of Community Colleges website viewable here, and have been doing alright so far, but have run into a problem when placing a div by an image (you can view my W.I.P. and complete code here). It specifically has to deal with the sidebar. As you can see from the actual webpage, there is a gap between the header and the banner/sidebar. However on my webpage, I was able to create the margin between the image and banner, but the sidebar (regardless of what I do) will nowhere replicate the actual websites.
I was using the display:inline-block in my css, and I read that when using this tag that any margin specifications will be ignored. I was wondering what any potential alternatives would be, as I don't want to mess up the positioning (the page stays centered regardless of window size, and I would like to keep it that way!) which is why I didn't use float:right tag on the "sidebar" div. Any suggestions to better improve the code will be appreciated! Here's the css code in question, in case you don't want to go to my page and view the source code:
#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}
I would place the sidebar and banner divs within a containing 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; }
Here's a jsfiddle.