CSS height prop doesn't work as expected

torahanjyuu

08-04-2010, 05:55 AM

I am trying to define two DIVs that will both be as tall as the tallest element. However, the DIV that contains both of these elements needs to be able to expand with content.

The simplified HTML is as follows:

<html>
<body>
<div id="wrapper">
<div id="menu"></div>
<div id="content"></div>
</div>
</body>
</html>

What CSS can I use to make both the menu and the content DIVs the same height? The following code almost works, except that the wrapper DIV does not expand with content:

html, body {
height: 100%;
}

#wrapper {
float: left;
height: 100%;
}

#menu {
float: left;
min-height: 100%;
}

#content {
float: left;
min-height: 100%;
}

Changing the wrapper's 'height' tag to 'min-height' breaks the whole thing.

Any thoughts? Can you help me? I appreciate your help!

Candan

08-04-2010, 06:02 AM

Try putting some content in your div's. Then in your wrapper's css block:
height:auto;

torahanjyuu

08-04-2010, 06:09 AM

There is content inside of the DIVs on the page I'm coding. I was just trying to simply things.

Setting the wrapper's height tag to auto breaks the page again. The menu and content DIVs revert to their minimum heights. I need them to be the same height...

SB65

08-04-2010, 08:02 AM

#wrapper isn't expanding because both the divs contained within it are floated. To make #wrapper extend to include these:

#wrapper {
float: left;
height: 100%;
overflow:auto
}

The overflow:auto will clear the float (in all browsers except IE7 and less). The height setting will give the element the IE only "hasLayout" property and hence clear the float in these browsers.

torahanjyuu

08-04-2010, 02:16 PM

That's closer, SB65 -- thanks!

But now, I the wrapper is 100% of the browser window height, and if my content extends past 100%, I get a new scrollbar -- much like an inline frame.

What I want is for the wrapper to use only the amount of space necessary -- from 10% to 200% (and beyond) of the browser window height. And I want the two DIVs inside to maintain 100% of the wrapper's height. It's really perplexing me.

SB65

08-04-2010, 03:30 PM

OK, then just remove the height to give:

#wrapper {
float: left;
overflow:auto
}

IE7 and less will still be OK as the float property will also give "hasLayout".

torahanjyuu

08-04-2010, 03:49 PM

I'm beginning to think that CSS can't do what I'm telling it to do. Because that's not it, either.

I'm adept at numerous programming languages, and I can pick up new languages without any problems whatsoever. Why the heck is CSS so hard?!?

abduraooft

08-04-2010, 03:55 PM

I think you are after faux columns (http://www.alistapart.com/articles/fauxcolumns/).