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; 
}