How to create a 3 columns fluid fixed fluid layout?

Question

I'm looking for a 3 column css layout, with 1 fixed section at the middle and 2 fluid sidebar around it:

http://www.uploadup.com/di-UEFI.png

middle has 250px width (for example) and sidebars have (at minimum) 150px width. if browser width was longer than 550px (250+300), sidebars should have a longer width. (and middle always is 250px)

What is the CSS can do it? with compatibility in all browsers.

note : i saw this page , but i don't know how to change it for my wish

Answer 1

You can try to use inline-block s for it. They are used rather rarely, but sometimes they are pretty good for layouts.

So, look at this: http://jsfiddle.net/kizu/UUzE9/ — with inline-block s you can create layouts with any number of fixed and fluid columns. The algorithm:

1. At first, you add the padding equal to the sum of all the fixed columns to the wrapper. In your case — 250px .
2. Then, you add min-width to the wrapper equal to the sum of all the fluid columns' min-width.
3. Then, you add white-space: nowrap to the wrapper, so the columns won't jump.
4. And then just add the all columns that you need.

If you need support for IE7 and lesser, there are some additional things to know except for common inline-block fix:

1. You must return white-space: normal to the inner child of a column, or the columns won't stay on one line.
2. There can appear a phantom scroll in IE, maybe there is a better way to remove it, but I just use overflow: hidden on some wrapper.

Enjoy :)

Answer 2

To make this work in IE6/7 without JavaScript, the easiest way to do this is with a table .

I know, I know. It's not that bad in this case, all considered.

See: http://jsfiddle.net/thirtydot/Q2Qxz/

Tested in IE6/7 + Chrome, and it will just work in all other modern browsers.

HTML:

<table id="container" cellspacing="0" cellpadding="0">
    <tr>
        <td id="left">fluid</td>
        <td id="mid">fixed</td>
        <td id="right">fluid</td>
    </tr>
</table>

CSS:

html, body {
    margin: 0;
    padding: 0;
    border: 0
}
#container {
    border: 0;
    table-layout: fixed;
    width: 100%
}
#container td {
    vertical-align: top
}
#mid {
    width: 250px;
    background: #ccc
}
#left {
    background: #f0f
}
#right {
    background: #f0f
}

Answer 3

If you don't use one of the ready templates out there,
You can start by three div floated left, the middle with width: 250px and the outside ones with min-width: 150px
You might want to replace it with the <section> tag, just give it a display: block