By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
458,125 Members | 1,525 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 458,125 IT Pros & Developers. It's quick & easy.

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

P: 8
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?
Dec 18 '09 #1
Share this Question
Share on Google+
2 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Google for "liquid fluid css layout"
Dec 18 '09 #2

P: 8
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!
Dec 18 '09 #3

Post your reply

Sign in to post your reply or Sign up for a free account.