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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
GimbaL
Forum Newbie
Posts: 18
Joined: Thu Apr 16, 2009 3:28 am

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

Post by GimbaL »

Trying to create a layout (with certain conditions) like this: (with CSS)

Image

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.

Can this be done, or am I expecting too much from CSS?
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

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

Post by daedalus__ »

there are some css layouts that are very similar to what you are asking.

i think that without specify widths you might be asking for a little much but id have to experiment to see. what happens if a column has no content? or what if a single line is a few hundred characters for some reason?

put the three columns in a parent container, set the width of container C then set the other two to use width: auto. using float or something you should be able to get this to work.

http://glish.com/css/
http://www.csszengarden.com/
http://www.cssplay.co.uk/layouts/

those are some of my favorite css sites. the answer is probably there. after i eat ill try to see what i can come up with.
User avatar
GimbaL
Forum Newbie
Posts: 18
Joined: Thu Apr 16, 2009 3:28 am

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

Post by GimbaL »

Thanks a lot... Not specifying the width seems to be the big issue here.

Column A certainly won't have no content at all, or become extremely wide. It's like a menu / list of hotlinks, but they may be translated, so I don't know the required size in advance. And I don't want it to take any more space than necessary. I indeed assumed width:auto should do the trick, but somehow I can't get it to work properly :(
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

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

Post by daedalus__ »

well it wouldn't hurt to specify a width for column A anyway then because you wouldn't want a link to be translated from english into german and have your 12 letter link be 43 letters or something like that, would you? that would stretch the whole layout and potentially affect column b negatively. i would say its safe to do until it IS translated. perhaps you could set a minimum width and a maximum width and see if that helps? overflow any excess or something
User avatar
GimbaL
Forum Newbie
Posts: 18
Joined: Thu Apr 16, 2009 3:28 am

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

Post by GimbaL »

Well suppose there are items in that list called "Products", "Tutorials", etc.
In German that would be "Produkten", "Auslegung" or whatever. Not unlikely that some items will be longer than their English versions (although from 12 to 43 chars would make it kinda unusuable, so yes, perhaps setting a max-width would be a good idea).
Post Reply