Flexible three column layout with horizontally scrolling middle column - is it possible?
Posted on 2010-01-06
The requirements for what I'm working on are as follows:
There are three columns in the layout. Together, they will always occupy 100% browser width
The three columns are all always approximately the same height, so that doesn't need to be taken into consideration.
The left hand column should take up as much horizontal space as it needs for its content.
The right hand column should take up as much horizontal space as it needs for its content.
The middle column should take up whatever horizontal space remains, and if this is not sufficient to display the content in it, it should have a horizontal scrollbar.
Is this even possible? I've played around for a few hours but I simply cannot get it to work. I end up with either the middle column not scrolling and the width going over 100%, or the right hand column wrapping below the other two, or some similar problem.
In the event this isn't possible, I'll accept the answer which is the closest approximation to what I'm trying to do.