Hi, I'm currently exploring the imfamous 'equal height column' design possibilities using css layouting and have stumbled upon a small obstacle. I'm exploring various techniques to understand thier limitations.
I have a couple of requirements I'm hoping to meet, i.e I need to find a cross-browser technique which take on the challenge. * Nothing fancy here, just your ordinairy 2 column layout . A container and one left and one right floated divs. * Support extending background - I need to place a gradient background in my right column, position it at top and have it extend infinitly by also suppluing a background color (the same color as the last color of the gradient). This way my background has a nice gradient at top which can extend infinitly. * The container (or atleast the illusion of the overall appearance) should use a 2px padding. My container will use a back border and the padding will give the design a nice white padding. * The columns should have a 15px (for now, might move to em units later on) padding, pushing the contents an additional 15px away from the 2px padding provided by the container (or what ever element ends up providing it). The solution I'm currently trying out is the described in the "Equal Height Columns - Revisited" section of the "In search of the One True Layout" article over at positioniseverything.net http://www.positioniseverything. net/articles/onetruelayout/equalheight It works really well except (you knew it would come, why else whould I post? hehe) for one thing, I can't get the 2px padding to appear at the bottom. Of course this is backause of the used technique - make the divs really long using padding and use negative margins to bring back the flow. Besides from this, it works excellent. I made a small example to illustrate where I'm currently in my quest. http://selfinflicted.org/css/columns.html As you can see I lack the white 2px space at the bottom. This technique would let me place a background on the right column and have it extend with the help of a background color. The example has been extracted, and simplified, from a much larger design - strickly for Proof of Concept. Also the padding requirement (15px inner padding of the columns) have not been included, but it's a trivial task to add later on, I wanted to keep the markup and css as clean as possible. I thought about the 'fauxcolumn' technique but it doesn't really work well with the 'infinite background' requirement. I really like the positioniseveything.net approach and I'm putting my hopes in your experience to help me reclaim my bottom white-space :) So there you go - let the suggestions and advice flow! Thanks for taking the time to read my description. .Andreas Håkansson ______________________________________________________________________ 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/
