0

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}
TeamRival
  • 39
  • 1
  • 5
  • should also mention I'm doing this through Notepad++. I'm not allowed to use a full-fledged web development tool. – TeamRival Nov 07 '13 at 23:23
  • 1/ Don't use `position: absolute` for layout. Never ever. 2/ Use normalize.css or even better read the comments in it and pick what you need for your project. Things like `body {margin:0(...)` 3/ If an element is floating then it's displayed as block per CSS specification. No need to add `display: inline-block` on `#banner`, it won't apply as long as it floats. 4/ Margins won't apply to `display: inline-block` elements? Are you sure? You could test it yourself ;) On `display: inline` (and `display: table-cell`) elements that's accurate. – FelipeAls Nov 07 '13 at 23:48

1 Answers1

0

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.

jmromer
  • 2,212
  • 1
  • 12
  • 24
  • 1
    great, this is working out great right now! I'll post if I have anymore questions. Obviously I had to adjust all the values to better suit my project, and also created another container that centers all the content on the page. – TeamRival Nov 08 '13 at 00:37