How do I replicate this 3 column layout without using a table?

Feeling a bit frustrated at not being able to properly figure this out. I'm updating an old site and am trying to make this work without tables. I can do it with box flex but its unsupported by a lot of browsers. The layout is something like this

开发者_StackOverflow

[col-1-as-small-as-possible][ col-2-should-use-all-space ][col-3-as-small-as-possible]

Columns don't need to be the same height, and the overall width of all 3 columns combined is constrained by a parent.

If I use floats I can't get the middle column to expand. The width of the col-1 and col-2 are not fixed widths.

Any solutions that don't feel worse then the problem(tables)?

here's an example of the table based solution: http://jsfiddle.net/7dsCV/1/

It's a strange solution, but setting overflow: hidden on the middle div will give you what I believe you want:

http://jsfiddle.net/qrBXL/

I've been meaning to figure out why this happens but haven't gotten around to it yet. My best guess is that overflow only works on rectangular containers and floats wrapping within the div make it essentially non-rectangular.

When you say "small as possible" I still assume they have a fixed width. It would be bad to have different widths between the pages. That being said, you can look at this article for a very good example of a layout which takes care of a lot of issues: http://www.alistapart.com/articles/holygrail/ If you don't want to go through all of it, at the end you have all the code, ready to be copied & pasted.