I have ran into this tricky CSS design problem. People who love
puzzles, will like this one.
My HTML: http://webmarksonline.com/temp/coollines.htm
My CSS http://webmarksonline.com/temp/coollines.htm
My Problem: http://webmarksonline.com/temp/comp1.gif
I am using the CSS method that floats all three columns. Because this
method produces uneven column lengths, I'm applying a vertically
repeating texture image (columntexture.gif) on my #column-wrapper div.
To make the column bottoms, I cleared the floats and added an image
(columnbottoms.gif) in the HTML.
With a bit of thought, you will realize that no matter how I slice my
columntexture.gif or my columnbottoms.gif, I will never be able to get
the two to line up properly in all cases of varying column heights.
Obviously, I would like my columns to grow and contract as needed based
on content.
Is there any solution? Should I have used another CSS layout method
instead? Should I try using table-layouts instead?
The another possibility might be to put in a Javascript hack that will
force the columns have heights of a fixed multiple. But I am curious to
know how people would solve this problem in CSS.
Thanks,
Artcoder
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
