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