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

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:

  
Left
  
Right
  
Center

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