How to make 3-Column layout with fluid center without floats

Question

I am trying to create a three column layout, with static width sidebars, and a fluid center column. I do NOT want the columns dropping when the page gets too narrow (center column at 250px), I'd like to have the whole thing just freeze, and employ side scrolling. Pretty sure this can't be done with floats. Here is what I have so far:

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

Answer 1

There's nothing wrong with CSS float. You could use min-width property on the wrapper to set a minimum width.

Here is an example:

HTML:

<div class="wrap">
  <div class="left">Left</div>
  <div class="right">Right</div>
  <div class="center">Center</div>
</div>

CSS:

.wrap {
  width: 100%;
  min-width: 940px;
}

.left {
  float: left;
  width: 200px;
}

.center { margin: 0 205px; }

.right {
  float: right;
  width: 200px;
}

JSBin Demo

Update: And here is the edited Fiddle

Answer 2

You can use

display:table;

example