css - フロートなしで流動的な中央の 3 列レイアウトを作成する方法

Question

静的な幅のサイドバーと流動的な中央の列を使用して、3 列のレイアウトを作成しようとしています。ページが狭くなりすぎた場合 (中央の列が 250px) に列がドロップしたくないので、全体をフリーズさせて、横スクロールを採用したいと考えています。これはフロートでは実行できないことを確認してください。これが私がこれまでに持っているものです：

http://jsfiddle.net/eNDPG/210/

HTML:

<div id="header">
    Header
</div>
<div id="container">
<span id="leftcol">
     Text1
</span>
<span id="rightcol">
    Text3
</span>  
<div id="centercol">
    Text2
</div>
</div>
<div id="footer">
    Footer
</div>

CSS:

#container {
overflow:hidden;
width: 100%;
float: left;
}

#leftcol {
border: 1px solid #0f0;
display: inline-block;
float: left;
width: 200px;
}

#rightcol {
border: 1px solid #0f0;
display: inline-block;
float: right;
width: 250px;
}

#centercol {
border: 1px solid #000;
overflow: hidden;
}

#header {
border: 1px solid pink;
width: 100%;
}

#footer {
border: 1px solid pink;
width: 100%;
}