How to make a 3-column layout with a fluid center without floats

Question

I am trying to create a three-column layout with static width sidebars and a fluid column. I DO NOT want the columns to be discarded when the page gets too narrow (center column of 250 pixels), I would like it to all just freeze, and use side scrolling. It’s pretty accurate that this cannot be done with floats. Here is what I still have:

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 is nothing wrong with CSS float . You can use the min-width property on the wrapper to set the 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 script

Answer 2

you can use

 display:table; 

example