Help, IE7 mugged my divs and now they're running off the screen!

My site, http://hivechatter.com/, is super sexy for Firefox, Chrome, IE8, you name it:

But then along comes IE7, who mauls her divs so bad that they nearly run off the screen! And for whatever reason the content within the divs is centered. What the heck is going on here? It seems to be something to do with the way IE7 interprets the left: percentage margins, but I can't figure it out.

For convenience and posterity's sake, below are the relevant portions of my css, with text formatting and other nonsense removed. #container is the overall page container, #blue_box is the main content box, #left and #right are the columns in the blue box, #divider is the white line that separates them, #links is the light blue nav hovering below #blue_box.

#background {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -9999;
}

html, body {
    margin: 0;
    padding: 0;
  开发者_运维知识库  height: 100%;
}

body {
    background: no-repeat #222933;
    overflow: hidden;
}    

#container {
    position: relative;
    left: 34%;
    top: 10%;
    width: 50%;
    min-width: 450px;
    max-width: 700px;
    overflow: auto;
    padding: 0;
}

#blue_box {
    position: relative; /* so that divider has appropriate height */
    width: 94%;
    padding: 3%;
    overflow: auto; /*needed so that div stretches with child divs*/
}

#left {
    position: relative;
    float: left;
    width: 44%;
    margin: 0;
    padding: 0;
}

#right {
    position: relative;
    float: right;
    width: 49%;
    margin: 0;
    padding: 0;
}     

#divider{
    position:absolute;
    left:49%;
    top:6%;
    bottom:6%;
    border-left:1px solid white;
}

#links {
    float: right;
    width: 16em;
    overflow: auto;
}

Change your position from relative to absolute for the container CSS.

Your problem is your image is just there with the container coming after it with a relative positioning.

IE7 is centering your container because you've set your body to text-align:center, then you're setting your container left:34%. IE is just adding those together for some reason. This is probably why your stuff is being centered in IE. You could do a conditional stylesheet for IE7 and remove the text-align.

Can't test at the moment if this will solve the issue but using margins on the blue box to position it instead of position: relative usually makes things a lot easier in the dark world of ancient Internet Explorers.