CSS：分为3列的页面不适用于Firefox

我想把一页分成三列。中间的一个将包含“内容”，而其他的将包含一个菜单，因此，我希望在用户（垂直）滚动页面时固定横向列。 这段代码在Chrome和InternetExplorer上都可以运行，但在Firefox上，左边的栏会折叠到右边的栏上，我不知道为什么。 下面是代码（如果您在不同的浏览器上打开它，您会注意到差异）：

HTML

---

谢谢大家

我不知道为什么Firefox表现得很奇怪，但我认为做你想做的事情的正确方法是这样的：

我从

#main

中删除了

float

，并将其

padding left

更改为

margin left

，现在它在浏览器上工作（）

---

你已经给了他们两个

位置：fixed

。右栏和主栏相互重叠。真不敢相信经过数小时的尝试，解决方案竟如此简单。谢谢。

<div id="left-col">LEFT</div>
<div id="main">MAIN</div>
<div id="right-col">RIGHT</div>

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

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