div and table siblings with similar CSS are positioned differently

I have a table and a div that should be displaying with the same width and at the same left position.

However, the table is being pushed right by something. It's not showing up in Firebug, and I can't figure out what could be causing it.

I'll attach pictures of the Firebug console rather than copying all the code here.

This is the div that's aligned as it should be:

This is the table that is bumped to the right:

In case it might be an issue, the CSS for #content is:

#content {
    margin-top: 0.5em;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

div {
    position: relative;
}

The CSS for #page is:

#page {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #FFFFFF;
    border-color: -moz-use-text-color #C5CAE8;
    border-left: 0.0625em solid #C5CAE8;
    border-right: 0.0625em solid #C5CAE8;
    border-style: none solid;
    border-width: medium 0.0625em;
    margin: auto;
    min-height: 30.5em;
    padding: 3em 0;
    width: 64em;
}

.clear {
    display: block;
}

div {
    posit开发者_开发百科ion: relative;
}

I can post the CSS for more parents if necessary.

I've copied the code to this jsfiddle, and the problem is evident.

---

I think your problem is due to your <div id="image"></div> It is what is pushing your table to the right because the div is too high. If you make it smaller or remove it your table shifts all the way to the left. If you then remove the position:relative from your table style you have your desired result.

Disclaimer: only tested in Chrome 12 :)

---

I see the problem in Safari in your jsfiddle.net example. Try adding overflow: hidden to the

<div class="gutter message-box center w75 alert">

block. That makes that <div> and the <table> underneath line up for me. But the pair don't line up with the header. But, if you remove the center class from both the <div> and the <table>, everything starts to line up properly. I suspect that you had a combination of a float problem (hence the overflow: hidden trick) and some fighting margins (which killing center fixed).

I still see a small width problem with the <table> but the above should get you started.