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:

<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