CODEWITHSUNDEEP
htmlcss
rockerest
rockerest

Reputation: 10518

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: image of the div

This is the table that is bumped to the right: image of the table

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.

Upvotes: 0

Views: 135

Answers (2)

joostschouten
joostschouten

Reputation: 3893

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 :)

Upvotes: 1

mu is too short
mu is too short

Reputation: 434835

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.

Upvotes: 1

Related Questions