3 column layout (fixed, fluid, fixed) with minimum width

Question

I have searched the web and just cannot seem to find a clean, simple, all browser friendly 3 column layout.

I am looking to have 3 column layout, the left column being 200px fixed with, the right column being 200px fixed with and the centre column the remaining width, but with a min-width of 600px. so the overall min-width is 200px + 600px + 200px = 1000px.

I have seen a lot of examples where the columns seem to overlap each other when resizing the browser, which is a problem.

Thanks

Stepchild

Answer 1

If source order does not matter then one simple solution is to use display table/table cell. Make the wrapper 100% wide with desired minimum width. Specify widths for fixed width columns. With table display, all columns will have equal height.

#wrapper {
  display: table;
  width: 100%;
  min-width: 1000px;
  min-height: 400px;
}
#column-1 {
  display: table-cell;
  background: #DDF;
  width: 200px;
}
#column-2 {
  display: table-cell;
  background: #EEE;
}
#column-3 {
  display: table-cell;
  background: #DDF;
  width: 200px;
}

<div id="wrapper">
  <div id="column-1">= 200px</div>
  <div id="column-2">&gt;= 600px</div>
  <div id="column-3">= 200px</div>
</div>

Juicy

Not sure what you mean by "source order" but this works great, very simple and clean. Thanks – Stepchild

Answer 2

Try media queries in screen resolution < 1000 px use const values. This can help you.

Gareth