CSS - 2 divs of equal height

[cooknwitha]

It's question time again.

I'm trying to create a website with a thin left div which will be the menu and the other big fat div alongside it will be the content.

Is there any way of making the thin menu div to be the same length as the big content div?

Obiously the content div goes all the way down to the bottom of the page no matter how much it has written there but the menu div would need a big blank area at the bottom for that to happen.

Any ideas how to make that happen?

 

[jakubpawlowicz]

This is possible, but you'll need a little trick. Check out the:
http://glish.com/css/
or better the
http://www.alistapart.com/articles/fauxcolumns/

Actually, A List Apart website is built around the layout you've mentioned, so you can always check it's source code.

 

[Mitthrawnuruodo]

You could experiment with the height property. But that is a bit troublesome, and not 100% supported (bad pun ), and it usually requires some experimentation to get it working (especially on IE for Win).

You would probably need some sort of a #wrapper div around the two other divs for this to work (because of the need for a specified "containing block"), and then set height on your left and content divs to 100%.

Good luck...

 

[cooknwitha]

That's the thing about Flash, Web Design and all things like this, it's all about problem solving and that alistapart example is perfect! How sneaky!!

Thanks for pointing it out jakubpawlowicz

And Mitthrawnuruodo, I was experimenting my brains out with the height property. It just wasn't being my friend!

 

[mkaake]

http://www.alistapart.com/articles/holygrail

 

[kgarner]

http://www.alistapart.com/articles/holygrail

I second this article. VERY powerful techniques and allows for truly semantic code.