I haven't designed any web pages for ages now.
I decided to do the 'right thing' and design a new site entirely with css. Well, one or two people have been experimenting with this new-fangled CSS stuff for a few months now, right? ;-)

Anyhow, I spent almost a whole afternoon trying to find out why my lovely design was jumping about 10-20 px to the left when I trimmed the page from 3 columns to 2 columns. It was only happening in FireFox wheras Internet Explorer was fine. This at least was my first clue. I spent ages and I mean ages trying to find out what I had done wrong.

I copied and pasted the working code and slowly removed each element. It was a working 3 column layout that I copied to a 2 column layout and removed the extra column. After removing the content - it was ok. After removing the <div> it was ok.

So where was I going wrong?

I thought I was going mad!!!

I tried removing individual image elements - I tried removing borders. I tried removing padding...

Before trying any of them I instinctively knew they wouldn't work - but hey..? You have to try, right?

Well, long story short, it turned out that it was nothing more than the FireFox ScollBar. Obvious when you know about it - but it can drive you nuts when you don't.

Here is the solution...