So between two pages I have the layout shifts ever so slightly to the right when I got to the contact info page. All the other pages don't do this when they're visited.
If it helps I'm using UL to give the address and hours of operation. But the CSS and everything else is the same.
I even went as far as to save the index as the contact page, put the info there and it's still doing it.
The reason for the actual shifting is your scroll bar is appearing which shifts everything over. As far as a solution you can either rewrite the code using non relative values. Or just add some <br /> to the bottom of the pages so that they all scroll.
I'm sure there are other more elegant solutions, but that's just off the top of my head.
Just a div tag that surrounds the content of the page and keeps everything aligned. If you check the source on the pages I linked it's the very last div before the <body> starts.
It's basically just a 'box' that everything else sits in. So if you move the box everything inside of the 'box' will move with it.
Two problems though, the script I'm using for the slideshow is doing some weird stuff. I can't find in the CSS or code itself where to shrink it down. It looks the same.
Also on the products page the table is doing some odd things with the footer
You probably want to play with the holder values, since it's way offset to the left. Whatever the holder value, you should subtract from the page value. So your holder would be centered with a width of 60% (or whatever and your margins would be 20% left and 20% right. If that makes any sense.
You also need to have your buttons have a rollover effect so that when you mouse over them they change.
Posts
It's the difference between index and photos to the contact page.
I'm sure there are other more elegant solutions, but that's just off the top of my head.
html { height: 101%; }
to your style sheet so that the scroll bar appears on all pages.
Other than that the only other solution I know of is using absolute positions. For example adding a holder around everything you have as seen here:
http://www.commoncoresheets.com/PA.html
http://www.commoncoresheets.com/PA2.html
It's basically just a 'box' that everything else sits in. So if you move the box everything inside of the 'box' will move with it.
The holder has decided to do it's job.
Two problems though, the script I'm using for the slideshow is doing some weird stuff. I can't find in the CSS or code itself where to shrink it down. It looks the same.
Also on the products page the table is doing some odd things with the footer
You also need to have your buttons have a rollover effect so that when you mouse over them they change.
I'd recommend checking out W3 schools or http://www.cssplay.co.uk/ for some great premade layouts.