The guide here: http://www.positioniseverything.net/...ut/equalheight

is not working for me. The Overflow:hidden isn't chopping off my extra column height, that is making my two columns equal in heighth.

My code goes like this:

Code:
#Main {
width: 728px;
position: absolute;
background-color: #999999;
left: 30%;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
html,body {
background-color: #8b8b98;
}
#Navi {
position: absolute;
width: 10%;
background-color: #999999;
left: 20%;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#wrapper
{
overflow: hidden;
}

MAIN PAGE BELOW

The usual stuff

<div id="Wrapper">

<div id="Navi">Navigation Bar content that needs to match the Main content area's height.</div>
<div id="Main">Main content area with blog/reviews/etc.</div>

</div>
I think I'm doing it correctly, but when viewed in IE6 and Firefox 1.5, the extra paddin/margin isn't being chopped off by overflow:hidden. The page scrolls on with endless 30,000 high columns. What am I doing wrong? Thx. I don't want to use the faux columns method. I want to use this method, as it seems easier. I also want to stay away from Javascript, as that gets rather messy fast. Just simple CSS, with or without hacks.

I've also tried my hand at Faux Columns....but that didn't work either. My attempt below

Code:

#Main {
width: 728px;
position: absolute;
background-color: #999999;
left: 30%;

}
html,body {
background-color: #8b8b98;
}
#Navi {
position: absolute;
width: 10%;
background:url(Navi_Back.png) repeat-y left;
left: 20%;
}

*Main Page Below*




<div id="Navi">Navigation Bar content that needs to match the Main content area's height.</div>
<div id="Main">Main content area with blog/reviews/etc.</div>
What I want is my short-height Nav Bar to extend and match my main content area in the center. One thing about this site is that it is a long site. @ a vertical resolution of 1200, this page takes scrolling to read. This, I think, plays into my dilemma. Any help or pointers would be vastly appreciated.