CSS: Page divided in 3 columns not working on Firefox - css

Question

I am trying to have a page divided in 3 columns. The one in the middle will contain the "content" while the other ones will contain a menu and, for this reason, I'd like to have the lateral columns fixed while the user (vertically) scrolls the page.
The code works on Chrome and on Internet Explorer but on Firefox the column on the left collapse over the column on the right and I can't figure out why.
Here's the code (if you open it on different browser you can notice the difference):
http://jsfiddle.net/mattyfog/6rn3j/4/
HTML
<div id="left-col">LEFT</div>
<div id="main">MAIN</div>
<div id="right-col">RIGHT</div>
CSS
#main {
width: 50%;
display: inline-block;
float: left;
padding-left: 25%;
background-color: grey;
}
#right-col {
float: left;
background-color: yellow;
}
#left-col {
float: right;
background-color: blue;
}
#right-col, #left-col {
position: fixed;
width: 25%;
min-width: 140px;
margin: 0px;
display: inline-block;
}
Thank you guys

Answer 1

I'm not sure why Firefox is acting strange but I think the correct way to do what you want is something like this:
I removed float from #main and changed its padding-left to margin-left and now it's working in on browsers (fiddle).
#main {
width: 50%;
display: inline-block;
/*float: left;*/
margin-left: 25%;
background-color: grey;
}
#right-col {
float: right;
background-color: yellow;
}
#left-col {
float: left;
background-color: blue;
}
#right-col, #left-col {
position: fixed;
width: 25%;
min-width: 140px;
margin: 0px;
display: inline-block;
}