I tried doing this in css, but it still wouldn't work. This is what I coded:
I added a block with a new class in the main.tpl and also set up a css for it in the main.tpl as well. It displays the block, but does not give it the 100% height. I can specify a height in px and it will update that, but when I set it for 100% it does nothing. Here is my main.tpl right now. Any help is appreciated.
I can change the height to a specific amount of pixesl and sure enough, that box then extends down that many pixels, but I need it to dynamically fill that space to the footer no matter if it's 10 pixels or 3000 pixels.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
<style type="text/css">
#left {
width: 140px;
float: left;
}
#main {
margin-left: 150px;
}
#container {
width: 100%;
float: right;
margin-left: -140px;
}
.sidebox {
width: 140px;
float: left;
height: 100%;
}
</style>
</head>
<body>
<div id="punwrap">
<div id="pun<pun_page>" class="pun">
<div id="brdheader" class="block">
<div class="box">
<div id="brdtitle" class="inbox">
<pun_title>
<pun_desc>
</div>
<pun_navlinks>
<pun_status>
</div>
</div>
<div id="container">
<div id="main">
<pun_announcement>
<pun_main>
</div>
</div>
<div id="left">
<div class="block">
<h2><span>Site Menu</span></h2>
<div class="box">
<pun_sidelinks>
</div>
</div>
<div class="block">
<h2 class="block2"><span>Game Sites</span></h2>
<div class="box">
<div class="inbox">
<ul>
<li><a href="http://www.nintendo.com">Nintendo</a></li>
<li><a href="http://www.nintendowifi.com/global/index.jsp">Nintendo WiFi</a></li>
<li><a href="http://etoychest.org">eToychest</a></li>
<li><a href="http://www.gamasutra.com/php-bin/news_index.php">GamaSutra</a></li>
</ul>
</div>
</div>
</div>
<div class="block">
<h2 class="block2"><span>Whos Online?</span></h2>
<div class="box">
<pun_online>
</div>
</div>
<div class="block">
<div class="box">
<div class="inbox">
<div class="sidebox">
</div>
</div>
</div>
</div>
</div>
<div class="clearer"></div>
<pun_footer>
</div>
</div>
</body>
</html>