CSS：页面分成3列，不能在Firefox上工作

Question

我想将页面分成3列。中间的一个将包含“内容”，而其他包含一个菜单，因此，我希望在用户（垂直）滚动页面时固定横向列。 该代码在Chrome和Internet Explorer上运行，但在Firefox上，左侧的列在右侧的列上折叠，我找不到原因。 下面的代码（如果你打开它在不同的浏览器，你可以发现其中的差别）： 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; 
} 

谢谢你们

Answer 1

我米不知道为什么Firefox行事奇怪，但我认为正确的方式做你想要的是这样的：

我从#main删除了float，并将其padding-left更改为margin-left，现在它正在浏览器（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; 
}