Geek Answers Handbook

CSS: three-column layout with a semi-fluid center

I am trying to create a basic three-column layout. Essentially, the center column must be fluid in that it must expand to consume any space not used by the left and right columns. However, it should also have a fixed min-width approximately 378 pixels.

There are several options for creating a three-column layout with a fully flowing center column, with or without floats. However, the problem with every pre-packaged solution that I have encountered so far (like the ones I tried myself) is that as the page width decreases, the right column gets to the top of the center column after how the page gets too narrow.

I would like to prevent this, if possible. Ideally, when min-width clicked, the right column should stay where it is, and the page should be horizontally scrollable. So the goal is:

  • 3-column layout with a liquid center column and fixed-width left and right columns.
  • A center column with a fixed minimum width so that it does not get too small.
  • The right column that respects the minimum width and does not stomp, does not float, or fall below the center column when the window becomes too small.

A pure CSS solution is recommended, but if there is an easy way to do this with some kind of smart JavaScript, I don't mind this approach either.

+4
source share
1 answer

To do this, you can use the 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 out http://jsfiddle.net/ykAPM/137/

+6
source

More articles:


All Articles