Question

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;
}

Answer 1

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.