CSS Positioning

[erica.gilbert]

I did not design this site, but have been tasked with centering all of the content (the main, mainbanner, maintext, sidebar, and footer divs). For whatever reason, I can't figure it out. I think the header div is messing up. You can check out the code by using Firebug at this address:

http://chetest.iu.edu/P20/

Does anyone have an answer for me?

Also, the Sidebar bumps up ONLY IN IE9. Can anyone tell me why?

[resdog]

If you are going to center it, you need to remove the

body {
   position: absolute;
}

code. Then on the main div, you'd set the margin:

#main {
  margin: 0 auto;
  position: relative;
}

To center you top banner, you'll need to rework it, as of right now the logo and form would be positioned absolutely and wouldn't move as the browser is resized. You should make your header div be 953 px wide, with a margin of 0 auto, then have a div (or h1 tag) for your logo and make the logo image (just the logo not the long red bar) the background image using image replacement. Then you can position the form field absolutely with right: 0 and it will look better.

You will need to modify some things to make it look how you want, but that will center your site.