[CSS] column layout without explicitly setting sizes, how!?

[Bram2]

Having trouble creating a layout with certain conditions like this: (with CSS)



Using tables, it's no problem. But I'm trying to accomplish the same result with CSS instead of tables, and whatever I try (span/div with float, multiple containers, etc), nothing seems to work, or suddenly B wraps under A and C instead of keeping column, etc... :(

My needs: column A should be as wide as required for its content. So I don't want so specify an explicit size in px or % there.
For the remaining space (so B+C), I can specify the size of C in px or % (for example C is 20% or C is 150px wide), and B should get whatever is left.
I also don't want to explicitly specify the height for the columns, they should be as tall as required for the content (so adding more content = column gets taller).

Now, the thing is, the entire width (A+B+C) is not known/fixed in advance. It's dynamic, depending on the content and other layout settings.

What is the most compatible, cleanest way to pull this off?

[drhowarddrfine]

Google for "liquid fluid css layout"

[Bram2]

Thanks, I've worked through several "liquid / fluid css columns" tutorials, but none of them seem to address the issue of having a truly dynamically sized column determining the remaining space for the rest (but rather, the other way round: center column is dynamically sized, determined by a fixed size side column).

Obviously I'm missing something, would you know any particular tutorial or explanation that clears this up? I'd love to learn!