3 column fit-fluid-fit layout with CSS

Question

How do I create a fit/fluid/fit column layout with CSS? By fit I mean the column width is that of the content in it. I do not want to set a pixel or percentage width for the outer columns, I want them to be the width of the content within them. I've resorted to using tables for the time being but it feels very wrong. Any suggestions?

Answer 1

Found a CSS only solution. Just tried it, works great.

http://www.thecssninja.com/xhtml/sangraal-layout

At first glance it seems like a 'fixed'-'fluid'-'fixed' layout, but you'll find if you remove the fixed widths on the right and left column that the columns 'fit' to the text you provide, and the center remains fluid without the center column or the container needing to know anything about the widths of the left and right columns.

Truly the Sangraal.

Answer 2

http://jsfiddle.net/Mutant_Tractor/bDdq9/1/

Answer 3

没有使用表格，但也许您可以在http://www.alistapart.com/d/holygrail/example_4.html上查找，它看起来与您所需要的非常相似。