Question

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 {
    position: relative;
}

I can post the CSS for more parents if necessary.

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

Answer 1

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 🙂