? auto margin starting pages of equal width in different places?

Dear All,

I thought was getting to grips with the basics of layout, positioning, floats etc. But I have been thrown into confusion and cannot for the life of me work out what’s going on. I hope someone can put me straight again.

The unwanted effect - as I pass from page to page the logo move’s right or left by 5px giving a flickering that is not wanted. Each of the pages are on the face of it the same width. I have made width declarations for all the divs and with close attention to the box rules calculate that all should be the same.

I have a page_Wrapper inside a canvas_Wrapper.

The CSS for the page is:

background-color: #fff;
width: 1100px;
margin: 0px auto;

when reviewed in fire bug all the pages show a width of 1100px both on the computed and the layout but the left most margin is 125 or 130 when viewed through layout. The DOM client width for both is 1100 however the DOM srollWidth is 1100 and 1111 respectively. So I am guessing that this scroll width is giving the clue that somehow it has overflowed pushing it to the left. ?? Is my thinking here correct ??

I have tried setting

overflow: hidden;

to see if this would reveal where this overflow is creeping in. But it didn’t help.

I took auto margin off, set margin-left: 0px; and then the scroll width computed width and layout width all = 1100.

So I am bugged to pieces by this. Obviously there is a gap in my understanding I was expecting the auto margin to centre the page_wrapper within the canvas and for all the logo’s to be in the same position. ?? Am I correct in thinking that if all the pages are the same width that the logo should always be in the same place. ?? Or is there something that I am missing.

Any guidance would be gratefully received. :confused:

Without seeing the site, we can only really guess. But my best guess is that some pages are taller than others, meaning that on some pages there is a scroll bar and on some there isn’t. If that’s the case, this is normal behavior (although I think it’s been changed on Macs now). Anyway, you can test this by making your browser window very short, so that there’s a scroll bar on all pages. Does this stop the effect?

One way to prevent this is by making all pages at least 100% tall, but it’s not a very nice thing to do codewise.

Can we have a link?
Shouldn’t you precise the units for min-width: & max-width:?

Thank you Dark Tranquility, I do not have a scroll bars on any of the pages. Although I will try the 100% idea. I did the obvious and applied a left margin and that sorts out the problem. But it still doesn’t sort out in my head why pages of equal width will not centre to exactly the same place when using margin: 0px auto; which has to date never caused an issue anywhere else?

Yes, margin 0 auto should work OK. So there must be something else interfering with the centering. If you can’t post a link, feel free to post a code sample that demonstrates the issue.