div and table siblings with similar CSS are positioned differently

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

@mu is too short Yes, I've copied all of the HTML and CSS [here](http://jsfiddle.net/rockerest/EakVz/) and it displays with the error. — rockerest, Aug 03 '11 at 21:43

score 1 · Answer 1 · answered Aug 03 '11 at 21:49

1

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.

answered Aug 03 '11 at 21:49

mu is too short

426,620
70
833
800

Any idea what's causing this? I added `.clear` to see what that did, and the message box doubled in height (and fixed the offset, too). Any idea what's happening here? – rockerest Aug 03 '11 at 21:52
@rockerest: There's a lot of unfamiliar HTML and CSS there so I guessed that there was a float problem based on the presence of a very short `
`. Removing `center` was also another guess. I'm old school, I hand craft all my HTML and CSS so I usually know exactly what's going on with my own stuff :)
– mu is too short Aug 03 '11 at 21:56
The header is left aligned and the body content is centered. That was a trick in itself. On an almost identical site, the logo dropped below the header bar [as with this question](http://stackoverflow.com/questions/6513067/enforce-a-min-margin-for-a-fluid-layout). I removed the margin on the wrapper that keeps it from sliding left in **this** implementation, so the wrapper just has `margin: auto`. For what it's worth, this is all hand-coded, too, I just can't figure out what's causing it. – rockerest Aug 03 '11 at 21:59
@rockerest: You could start removing things until the problem goes away. Or start from nothing and add things until it appears. – mu is too short Aug 03 '11 at 22:05
+1 cause of all the help! I switched the answer to @joostschouten cause that's the real fix I was looking for :) Thanks for all your time and knowledge. – rockerest Aug 03 '11 at 22:10
@rockerest: No worries, that was nice find on joostschouten's part so I gave him an upvote too. – mu is too short Aug 03 '11 at 22:14

score 1 · Accepted Answer · answered Aug 03 '11 at 22:02

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

answered Aug 03 '11 at 22:02

joostschouten

3,863
1
18
31

This was right. I've been meaning to fix that div height; I knew it was going to come back and bite me. Gah. Thanks. – rockerest Aug 03 '11 at 22:10

div and table siblings with similar CSS are positioned differently

2 Answers2