Why do my center-aligned divs not scroll to the left?

(Note: There are no scrollbars on these divs, so there is literally no way to scroll to the left, whether it be 开发者_开发问答in the body or within the divs themselves.)

The problem (pictured above in FF and Opera), which exists on both the "Baroque" and "Spotlights" theme selections (see below for links), is that when you shrink the browser small (e.g. under ~900 width), the horizontal scroll bar does not scroll to the left. It will scroll to the right just fine, but it doesn't care at all if the navigation menu gets shoved off the left side of the screen and is completely inaccessible.

What would make it do this?

Here is the pertinent HTML:

<div class="center1">
<div class="center2">
  <div style="position:relative; top:180px; width:1226px;" id="containerBGimgLParent">
    <div id="containerBGimgL"></div><img src="images/skin3/dark_interface_parts5b.png">
  </div>
</div>
</div>

<div class="center1">
<div class="center2">
<div id="containerBG">
    <div id="NavMenu">
                <ul class="kwicks">
            <li id="kwick1"></li>
            <li id="kwick2"></li>
            <li id="kwick3"></li>
            <li id="kwick4"></li>
            <li id="kwick5"></li>
            <li id="kwick6"></li>
            <li id="kwick7"></li>
                </ul>
    </div>
</div>
</div>
</div>

<div id="contentdiv"></div>

... and CSS:

body {
    background-image: url("../images/skin3/DIBG.png");
    background-repeat: repeat;
    font-family: "Times New Roman";
}

#NavMenu {
    float:left;
    width:170px;
    background-color: #000; 
    padding:5px; 
}

.center1 {
    position:absolute;
    right:50%;
}

.center2 {
    position:relative;
    left:50%;
}

#containerBGimgL {
    background-image:url('../images/skin3/dark_interface_parts5a.png');
    background-repeat: no-repeat;
    width:1040px;
    height:672px;
    display:inline-block;
}

#containerBG {
    width: 980px; 
    position:relative;
    top:274px;
}

#contentdiv
{
    position:absolute;
    top:320px;
    left:700px;
    width:600px;
    height:526px;

    text-align:left;

    padding: 0px 20px 0px 0px;
    background-color: #000;
    overflow-y: scroll;
    color:#fff;
}

The javascript resize function changes the dimensions of a few divs, but does nothing that would result in this problem. It does not, for example, change any div's overflow to hidden.

To see the problem in action, click here: http://www.solarcoordinates.com/testing3/index.html. (I don't currently have it working when JS is disabled, so JS will have to be enabled if you want to look.)

---

You should center the main section with another method:

• On .center1 remove your position and right rules.
• On .center2 remove your position and left rules.
• On #containerBG, add margin: 0 auto to center it again.

Testing in Chrome with JS enabled, and resizing the window to a few different sizes, it looks the same as before, with the exception that your problem is fixed.

It also works in Firefox, just tested it.

It seems that you no longer need <div class="center1"> and <div class="center2">. You can can remove them.