Question

I’m attempting to create a basic 3-column layout. Essentially the center column should be fluid in that it should expand to consume any space not used by the left and right columns. However, it also needs to have a fixed min-width of approximately 378 pixels.

There are a number of options for creating a 3-column layout with a completely fluid center column, with or without using floats. However, the problem with every prepackaged solution I’ve come across so far (as well as the ones I’ve tried myself) is that as the page width is decreased the right column will come over the top of the center column once the page gets too narrow.

I’d like to prevent this, if possible. Ideally once the min-width is hit the right column should stay where it is, and the page should become horizontally scrollable. So the goal is:

1. A 3-column layout with a fluid center column and fixed-width left and right columns.
2. A center column with a fixed minimum width to prevent it from becoming too small.
3. A right-column that respects the minimum width and does not trample, float over, or wrap below the center column when the window becomes too small.

A pure-CSS solution is preferred, but if there’s a simple way to do this using some clever JavaScript I’ve got no objection to that approach either.

Answer 1

For this you can use display:table property. Write like this:

#wrapper{
    display:table;
    width:100%;
    height:100%;
}
#wrapper > div{
    display:table-cell;
    height:100%;
}

#left {
    width:50px;
    min-width:50px;
    background-color:pink;
}

#center {
    background-color:green;
    min-width:200px;
}

#right {
    width:50px;
    min-width:50px;
    background-color:red;
}

body, html{
    width:100%;
    height:100%;

}

Check this http://jsfiddle.net/ykAPM/137/