How to make table height 100%? - html

Question

I am having a problem, I have my website: yusifmusic.com organized so that the links (Biography, Tour History, etc) are in a drop-down list. HOWEVER, as you can see, once the text goes beyond the left column, it starts to stretch into the left column. One fix was to add a ton of breaks to the code (in between the p and end span tags, near the bottom). However, that adds a lot of blank space to the bottom of the page. I'm sure there must be a better solution. I tried making the table height = 100% with styles, no luck. Would just like this left column table to extend to infinity in height, so that the center text on this webpage will be indented when it is revealed. It's really sloppy looking the way it is right now... How can I do this?
<table bgcolor="#000000" width="200" border="0" align="left" cellpadding="35";>
<tr><td>
<div align="center">
<span style="font-size: 12pt">
<u>Tour Dates:</u><p></span>
<span style="font-size: 8pt">
<P>
2/26 - 50 Mason Social House - San Francisco, CA<br><br>
etc... <br><br>
<p>
</span>
</td></tr>
</table>
<P><br><br><br>
<p>
<div align="center" class="geo">
CONTACT: booking#yusifmusic.com etc etc
<br>
<br>
<script language="javascript">
function toggleBio() {
var ele = document.getElementById("toggleBio");
var text = document.getElementById("displayBio");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "BIOGRAPHY";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
<font size = "4"><center>
<a id="displayBio" href="javascript:toggleBio();">BIOGRAPHY</a> </center></font>
<div id="toggleBio" style="display: none">
<center><b>Yusif!</b></center>
<center><i>Yusif!</i> (self-released)</center>
<center><u>Biography</u></center>
<p>
<p align="left">
"Sometimes our most destructive moments... etc etc<br><br>

Answer 1

I have found personally that dealing with tables to design website layouts is usually painful, and so in general a lot of webdevelopment is moving away from tables and to div tags, classes and stylesheets.
I know this isn't a small immediate fix to your problem, but I think you could easily move a lot of this to Bootstrap.js to fix this problem very quickly and easily.
http://twitter.github.com/bootstrap/scaffolding.html
In particular, you can use the scaffolding to create three "columns" or vertical sections, for which you could insert your existing code into.
The separators would for the bottom section, given that you are using bootstrap properly for the rest of the page would look something like this:
<div class="row">
<div class="span4">...Tour Dates Code...</div>
<div class="span4">...Middle Column Code Contact....Bio....</div>
<div class="span4">...Code for The Red Column...</div>
</div>
Another thing which is probably a quicker fix, is to include the whole of the bottom in one "parent table". You can play around with the cell widths and percentages yourself. Having the code be within a parent table will help the sections retain their form.
<table bgcolor="#000000" width="100%" border="0" >
<tr>
<td>....Insert left table that has bgcolor="#00000" and cellpadding="35" </td>
</tr>
<tr>
<td>...Insert Center Code here....</td>
</tr>
<tr>
<td>...Insert right table that has cellpadding="8" and bgcolor="#550000"...</td>
</tr>
</table>
You can read more about tables here: http://www.w3schools.com/html/html_tables.asp and other places online.
I'd also recommend removing the align tags from within the tables, and managing the width and positioning them from the parent cell container.