Sent by Dave M G on 26 July 2007 14:02
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-REMOVED]]
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/
