CSS-d, I have been looking around the web to try and find the right solution for my issue. Although I've seen many articles describing how to get two or three columns to match each others length, I can't quite seem to apply the information to my situation.
Unfortunately I can't show a live example, but I've uploaded a screenshot and the CSS to here: Screenshot: http://autotelic.com/Screenshot.png CSS: http://autotelic.com/style.css I've added borders so that it's more clear where the boundaries of the relevant <div> tags are. I have a "container" <div> (green border), and inside of it is a "side-menus" <div> (blue border) and a "article container" <div> (purple border). The side-menus <div> is floated to the left, and the article-container <div> has a margin on the left side that is a little wider than the side-menu's width. I think it's a fairly standard approach to creating a two column layout, except that both columns happen to be inside a <div>. I don't need necessarily need either the side-menu or article-container <div>s to stretch to match the other. This seems to be the effect that most online instructions cater to. What I need is for the container <div> to stretch out to be as long as whichever of the side-menu or article-container is longest, so that its borders and background enclose both columns all the way down to the bottom. Right now, basically the container stretches to match the height of the article-container column only. So if the article-container side happens to be longer than the side-menus, all is good. But, if the side-menus column is longer, as it is in the screenshot, then its content stretches past the background of the container. No good. At first I thought my problem was the "collapsing margins" issue described here: http://www.w3.org/TR/CSS21/box.html#collapsing-margins But I've added a 1 pixel padding to all sides of the relevant <div>s, and it still doesn't work. Then I read that when a <div> is floated, it falls outside of the document flow. However, what I don't get is that I have a footer below both Left and Right, that has a "clear: both" property in it. So it slides underneath the side-menus, and pulls down the length of the container. I thought that setting the height on all the nested <div>s to 100% should at least have some effect, but it doesn't. At this point I'm quite confused. Can anyone recommend a reliable way to get the <div>s inside my container <div> to reliably reach down to the footer? Thank you for any advice. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
