CSS Columns + Rounded Corners + Variable width
November 8, 2005 1:26 PM Subscribe
CSSFilter: Has anyone cracked the nut of getting a multiple column layout with each column having rounded corners and all columns extending to the same height and at least one of the columns has a variable width/height?
I can do multiple columns with different backgrounds that each extend to the same height-- no problem. I can do multiple columns with rounded corners-- no problem. But I can't get two columns with rounded corners to match heights because the two hacks are incompatible.
I can do multiple columns with different backgrounds that each extend to the same height-- no problem. I can do multiple columns with rounded corners-- no problem. But I can't get two columns with rounded corners to match heights because the two hacks are incompatible.
not sure how you're defining the rounded corners but this page might help you.
posted by grafholic at 1:36 PM on November 8, 2005
posted by grafholic at 1:36 PM on November 8, 2005
Tables are easiest.
Another way is to take a regular nested div with backgrounds and - in Javascript - keep the heights of both columns in sync. I've found this to be the cleanest, and it avoids too many CSS hacks.
posted by holloway at 1:55 PM on November 8, 2005
Another way is to take a regular nested div with backgrounds and - in Javascript - keep the heights of both columns in sync. I've found this to be the cleanest, and it avoids too many CSS hacks.
posted by holloway at 1:55 PM on November 8, 2005
all columns extending to the same height and at least one of the columns has a variable width/height?
Is it just me, or have you contradicted yourself there? It's a bit ambiguous.
Short answer -- fake it, with images.
posted by AmbroseChapel at 2:10 PM on November 8, 2005
Is it just me, or have you contradicted yourself there? It's a bit ambiguous.
Short answer -- fake it, with images.
posted by AmbroseChapel at 2:10 PM on November 8, 2005
Can you show us what you have so far? I'm having trouble visualizing how the two hacks are incompatible.
Regarding CSS3: It's nice that it supports all sorts of things. I've heard you can even teleport to brand new locales using only the power of your mind. But none of that does us any good if no browsers will support it. And browser support is poor/non-existent to say the least.
I'm sure you've checked out Quirks Mode, already?
To the other people responding to this question: The entire purpose of this question is on how to avoid use of tables. Tables, as everyone knows, were never meant to be used as a layout/positioning mechanism, but were intended for organizing rows and columns of actual data. Of course, they do an amazing job of providing us with a simple solution to achieve complex, creative layouts, but um... that's not what they're there for! (I say this all very tongue-in-cheek. I personally have trouble with the entire CSS/div concept, because it's so much more obnoxious to achieve results that are made so simple with the use of tables. But I digress.)
If the poster was looking to do this with tables, they wouldn't have asked the question in the first place.
posted by disillusioned at 2:21 PM on November 8, 2005
Regarding CSS3: It's nice that it supports all sorts of things. I've heard you can even teleport to brand new locales using only the power of your mind. But none of that does us any good if no browsers will support it. And browser support is poor/non-existent to say the least.
I'm sure you've checked out Quirks Mode, already?
To the other people responding to this question: The entire purpose of this question is on how to avoid use of tables. Tables, as everyone knows, were never meant to be used as a layout/positioning mechanism, but were intended for organizing rows and columns of actual data. Of course, they do an amazing job of providing us with a simple solution to achieve complex, creative layouts, but um... that's not what they're there for! (I say this all very tongue-in-cheek. I personally have trouble with the entire CSS/div concept, because it's so much more obnoxious to achieve results that are made so simple with the use of tables. But I digress.)
If the poster was looking to do this with tables, they wouldn't have asked the question in the first place.
posted by disillusioned at 2:21 PM on November 8, 2005
Position is Everything's extensive In search of the One True Layout combines methods for any-order columns, equal-height columns, and vertical grids. One of the examples uses rounded corners.
posted by kirkaracha at 2:39 PM on November 8, 2005
posted by kirkaracha at 2:39 PM on November 8, 2005
Response by poster: all columns extending to the same height and at least one of the columns has a variable width/height?
Is it just me, or have you contradicted yourself there? It's a bit ambiguous.
Sorry-- to be clear: The idea is that the longest column (as determined by the amount of text in that column) determines the height for the rest of the columns, so that all columns are the height of the longest column. And the height of the longest column is determined by the window width since some columns have variable widths.
Thanks for the various answers, I'm investigating...
posted by gwint at 3:27 PM on November 8, 2005
Is it just me, or have you contradicted yourself there? It's a bit ambiguous.
Sorry-- to be clear: The idea is that the longest column (as determined by the amount of text in that column) determines the height for the rest of the columns, so that all columns are the height of the longest column. And the height of the longest column is determined by the window width since some columns have variable widths.
Thanks for the various answers, I'm investigating...
posted by gwint at 3:27 PM on November 8, 2005
You could also use faux-columns if you were willing to do away with variable widths.
But this is a case where I'd just use tables to get out of the column height problem. I'm a quitter I guess, but CSS layout is just pathetic.
It's sad, but I almost never use columns with a different background color than the page anymore, because I just kinda got sick of dealing with this exact column-height problem, in addition to fretting over the different, totally incompatible box models of the various browsers. I refuse to use hacks to create basic layouts, damnit! It was easier before the standards trolls made everybody feel guilty about using tables. Sorry, rant.
posted by Hildago at 5:16 PM on November 8, 2005
But this is a case where I'd just use tables to get out of the column height problem. I'm a quitter I guess, but CSS layout is just pathetic.
It's sad, but I almost never use columns with a different background color than the page anymore, because I just kinda got sick of dealing with this exact column-height problem, in addition to fretting over the different, totally incompatible box models of the various browsers. I refuse to use hacks to create basic layouts, damnit! It was easier before the standards trolls made everybody feel guilty about using tables. Sorry, rant.
posted by Hildago at 5:16 PM on November 8, 2005
If the poster was looking to do this with tables, they wouldn't have asked the question in the first place.
i dunno -- I asked some folks awhile ago about how to achieve something similar and most of them said "well, you *might* be able to hack it together, but it sounds like you should just use tables." However, I, wanting to catch the wave of the burgeoning CSS movement, decided to do the entire thing in CSS.
I wish I hadn't been so determined. It got done, but it was not worth doing, and is still breaky in several browsers. Sometimes the best tool for the job is not what the "experts" recommend. Maybe as a proof of concept, sure, but as a live website? i'd just use tables and wait for CSS to catch up for the more complex stuff.
posted by fishfucker at 7:20 PM on November 8, 2005
i dunno -- I asked some folks awhile ago about how to achieve something similar and most of them said "well, you *might* be able to hack it together, but it sounds like you should just use tables." However, I, wanting to catch the wave of the burgeoning CSS movement, decided to do the entire thing in CSS.
I wish I hadn't been so determined. It got done, but it was not worth doing, and is still breaky in several browsers. Sometimes the best tool for the job is not what the "experts" recommend. Maybe as a proof of concept, sure, but as a live website? i'd just use tables and wait for CSS to catch up for the more complex stuff.
posted by fishfucker at 7:20 PM on November 8, 2005
the above comment meaning that I wish someone had made a little better argument that what I was trying to do was best done with tables, at this point in time.
posted by fishfucker at 7:20 PM on November 8, 2005
posted by fishfucker at 7:20 PM on November 8, 2005
Another rarely-used trick is to apply table layout in CSS to struturally correct HTML--you can use CSS to style DIVs and whatnot to display as table rows and cells. So you get ideologically pure HTML and table layout all in one.
Here's a demo. Check out the source code.
Three guesses as to which browser this breaks. I think that you could overcome that with the use of Dean Edward's IE7.
posted by adamrice at 7:26 AM on November 9, 2005
Here's a demo. Check out the source code.
Three guesses as to which browser this breaks. I think that you could overcome that with the use of Dean Edward's IE7.
posted by adamrice at 7:26 AM on November 9, 2005
Eric Meyers extends the "One True Layout" techniques to support columns of mixed width measures.
posted by kirkaracha at 11:20 AM on November 9, 2005
posted by kirkaracha at 11:20 AM on November 9, 2005
Response by poster: Thanks again for all the replies. After a few more hours of playing with the CSS options, I decided to go with an old school table solution.
posted by gwint at 12:36 PM on November 9, 2005
posted by gwint at 12:36 PM on November 9, 2005
You made the right choice. Just don't let Jakob Neilsen find out.
posted by Hildago at 5:20 PM on November 9, 2005
posted by Hildago at 5:20 PM on November 9, 2005
This thread is closed to new comments.
For now the only solution is to augment you layout using cunning and sparing use of tables. It's doable and takes the headache out of things, and it doesn't have to be totally mind numbingly tricky and fragile like it can get with CSS.
posted by alexst at 1:30 PM on November 8, 2005