overflow hidden fails when its container has percentage height

[Trevor Berman]

I have an elastic layout site. In it I am trying to use a three tiered image as a three state button. The container for this button is limited to the height of one state/tier of the button and has overflow: hidden; applied. This works fine to mask the unseen states/tiers --as long as the height for the container is set in pixels.

!!! My problem !!! As soon as I set the height of the masking container (#paper) as a percentage, to keep the layout elastic, overflow: hidden; fails expanding the container to show all the states/tiers.

I have tried setting all other parent tags with height: 100%; and/or max-height: in em's proportionate to the max-width of my wrap. No luck, no matter what I do this set-up breaks as long as #paper's height is %. Am I breaking some unspoken rule? None of my searching or research into overflow: hidden; is of any help whatsoever.

HTML---
<div id="wrap"><img class="full" src="img/home-bckgrnd.jpg" alt="" title="">

<div id="header" class="group">
	<div id="logo">
		<a href="#">HUEY CROWLEY</a>
	</div>
	
	<ul id="nav">
		<li id="paper"><a href="pages/paper.html"><img class="full" src="img/paper-link.jpg" alt="" title=""><span class="alt">PAPER</span></a></li>
		<li id="paint"><a href="pages/paint.html"><span class="alt">PAINT</span></a></li>
		<li id="junk-drawer"><a href="pages/junk-drawer.html"><span class="alt">JUNK DRAWER</span></a></li>
		<li id="store"><a href="pages/store.html"><span class="alt">STORE</span></a></li>
		<li id="about"><a href="pages/about.html"><span class="alt">BIO/CV</span></a></li>
		<li id="contact"><a href="mailto:contact@hueycrowley.com"><span class="alt">CONTACT</span></a></li>
	</ul>
</div> <!-- /header -->


CSS---
body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #444;
	font-size: 62.5%; /* takes 16px (default size for ‘medium’ text in all modern browsers) down to 10px, a nice round number for quikly calculating relative parent/child font-sizes in the time-sensetive real world.
						From now on it’s easy to think in pixels but still set sizes in terms of ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc.  */
	background: #000;
}
#wrap {
	margin: 0 auto;
	max-width: 192em;  /* = 1920px; */
	/* height: 100%; */
	/* max-height: 152em;  = 1520px; */
}

#header {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}
#nav {
	/* width: 100%;
	height: 100%;
	border: 1px solid pink; */
}
a .alt { /* text hidden from sight but safe for screen readers, only breaks if user prefs CSS=on images=off */
	/* display: block;
	width: 0;
	height: 0;
	overflow: hidden; */
}

/* creates sized opening for portion of 3tiered paper-link button to show through */
/* percentages % used to expand/contract buttons with the entire elastic layout */
#paper {
	display: block;
    /* width: 15%; result of-- 289px-this container/1920px-context of container width --#wrap-- it scales in = .15 */
	width: 289px;
	/* width: 20.25%; */ /* what is the context width if this is the % which displays full size ?  */
    /* height: 6%;  result of-- 95px-this container/1520px-context of container height --#wrap-- it scales in = .06 */
	height: 95px;
	overflow: hidden;
	border: 1px solid red;
}
/* button starts showing only top tier and returns to top tier after being activated*/
#paper a img, a:visited img {
	position: relative;
	margin: 0;
}
/* button moves up showing only middle tier */
#paper a:hover img {
	 /* top: -6%; result of-- 96px-this container/1520px-context of container height --#wrap-- it scales in = .06 */
	top: -96px;
	/* top: -101.25%; */
}
/* button moves up showing only bottom tier */
#paper a:active img {
	 /* top: -13%; result of-- 190px-this container/1520px-context of container height --#wrap-- it scales in = .13 */
	top: -190px;
	/* top: -195.25%; */
}