Why is my layout broken only in Firefox and IE8 (not 9)? - html

Question

I noticed today that a website that I've completed months ago was not showing well on Firefox and IE8 (works fine in IE9). It's quite old now and I'm pretty sure that I tested browser compatibility at the time but I guess one does make mistakes.
Problem is I can't seem to understand the problem. Basically I have a left floated sidebar with a fixed position but it renders on the right (outside its container) on FF and IE8. I could always build the layout again from scratch (it uses Skeleton Grid system) but would still like to understand the problem.
Example page that's broken on the website.
Try to open it with various browsers and see for yourself. Also, if someone views it right on FF, I'm interested too.
Thanks a lot!
Edit: I'm not asking for a whole debugging. Just if someone knows of this issue.
Edit2: Validator links are irrelevant here. I checked it already and they're basically prefixes for css and CMS-related for html.
Edit3: I fixed it and prepared a kinda complete answer to post but as I'm a new user, I can't answer my own question in the next 7 hours... so here it is:
I just sorted the whole thing out with hints from your answers (thank
you!).
Basically, it's something to do with how browsers handle floats on
fixed elements. Imagine we're dealing with successive "float:left"
element, which is the case in most grid system (960gs, bootstrap,
etc.).
Here's how browser will handle these elements without fixed
positioning: http://jsfiddle.net/cPjdK/ And with float:right :
http://jsfiddle.net/cPjdK/1/
Now what if we have a very long third column and want to fix the first
(my example)? Well it basically disables the floats because fixed
elements are out of the flow. http://jsfiddle.net/cPjdK/9/
So you have to position them absolutely (or with margins in my case)
http://jsfiddle.net/cPjdK/6/
Now what about my website? The fixed elements were floated anymore and
the whole grid system kinda fell apart. Fixing this appeared to be a
long work. But, for some reason, replacing my "float:left" properties
on floated elements with "float:right" basically fixed it. Why did it
fix it? Why was it not working on FF and IE8 but appeared fine on IE9
and Chrome.
I have no idea.
But it looks fine now (after a few tweaks) and I've already been paid
so...
Problem solved but question unanswered, sorry...

Answer 1

You have a FIXED positioned element without giving it any coordinates.
Try giving it something like:
#side-right{
position:fixed;
top:0;
left:0;
}