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?
Asked
Active
Viewed 1,459 times
3 Answers
2
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.
Arthur Goldsmith
- 2,976
- 2
- 17
- 7
1
Myles Gray
- 8,711
- 7
- 48
- 70
-
The link to the 3 column fluid layout is not what I want. I want FIT/fluid/FIT (i.e. no percentage width for the outer columns). – pmdarrow Mar 11 '11 at 17:50
-
@pmdarrow As you are not going full dynamic and not using pre-specified widths for the columns at the side this is the only option, it isn't hacky, it is a lot less hacky than the table based layout, if you are comfortable with it I could do you up a JS based one? – Myles Gray Mar 11 '11 at 18:04
-
-
If you could edit your answer and remove everything but the JS solution, I'll mark it as accepted. – pmdarrow Mar 15 '11 at 12:41
-
this solution is valid, but I'd really like to see a version of this that works in pure CSS, without tables. – Arthur Goldsmith May 18 '11 at 17:56
0
Not using table, but maybe you can have a look there http://www.alistapart.com/d/holygrail/example_4.html that seems to be very similar of what you need.
Haza
- 2,991
- 1
- 16
- 13
-
Looks like there are fixed (i.e. px or %) widths on the outer columns. This is not what I want. I want it them to fit the content within them. – pmdarrow Mar 11 '11 at 17:52