How do I get table columns equal at bottom?

Hi. I am having trouble getting the white columns of my page to go all the way to the bottom. I want the bottom of the menu and the main-info columns to be equal regardless of which happens to have longer text on the page. My page link is:

[URL]http://www.thecozycactus.com/baby-gifts-new64.html[/URL]

I have the menu and the borders of the main-info column working in IE, but it has no effect in Netscape.

Is there a way I can do this to make the page look neat & clean (hopefully something standard for all/most browsers)? I’ve seen other questions like this, but I still can’t seem to figure it out with my page. (I’m no expert with CSS/HTML – mostly what I know is what I use on my webpage).

Thanks for any help and suggestions. The code:

[CODE]<tr> <td height=0 width=”15%”></td>

<!– Body–>
<td class=”main-ivory” rowspan=2 colspan=2 >
<table class=”main-green” cellspacing=5 >
<tr><td class=”main-pink”>
<table cellspacing=”0″ summary=”Personalized Baby Gifts, Personalized Baby Blankets”>

<tr> <td class=”tlp”> <img src=”r/TLP.GIF” alt=”X”></td><td class=”trp”><img src=”r/TRP.GIF” alt=”X” ></td>
</tr>

<tr> <td class=”bL1″ colspan=2><p><b>
Personalized Baby Gifts – Baby Blankets,<br>Throws, & Baby’s First Christmas</b><br>items all make wonderful baby gift ideas a mother is sure to treasure!
</td>
</tr>

<tr><td class=”b1″>
<!– Personalized Baby Blankets,Receiving–>
<br><br><img src=”p/fl2.gif” align=”left” alt=”fl”><h2>Personalized Baby Blanket</h2>
<p><b>Personalized Baby Blankets</b> make<br> baby’s homecoming extra special!<br>
<b>Free</b> matching infant cap.<br>$24.00<br>
</p>
<br><br><br><hr></td>
<td class=”b2″><p class=”CentImg”>
<a href=”p/baby-blankets-lrg.gif”><img src=”p/baby-blankets-block.gif” alt=”Custom embroidered Personalized Baby Blankets”></a>
<a href=”p/baby-blankets-date.jpg”><img src=”p/baby-blankets-date.gif” alt=”Name/Birthday Personalized Baby Blankets”></a>
</td>
</tr>

<tr> <td class=”bL2″ height=”100%” colspan=2>
<br><br><p><b>Moms, </b>for helpful <a href=”libb.html”>baby links</a> & <a href=”limo.html”>Mom links,</a>click here.
</td>
</tr>
<tr> <td class=”blp”><img src=”r/BLP.GIF” alt=”X”></td><td class=”brp”><img src=”r/BRP.GIF” alt=”X”></td>
</tr>

</table> <!– whole main/body part–>
</td></tr> </table><!– main-green table part–>
</td>
</tr>

<tr><td class=”menu-ivory”>

<table class=”menu-green” cellspacing=5>
<tr><td class=”menu-pink” >
<table class=”menu-bg” cellspacing=0><tr><td class=”menu-bg” >
<div class=”menu” >
<a href=”bb.html”><b>Baby Gifts</b></a><br>
Christmas</a><br><br>
<a href=”kd.html”><b>Children’s Gifts</b></a><br>
&nbsp &nbsp<a href=”big-brother-t-shirts.html”>Big Brother Shirts</a><br>
&nbsp &nbsp<a href=”big-sister-t-shirts.html”>Big Sister Shirts</a><br>
&nbsp &nbsp<a href=”kd.html”>Princess Gifts</a><br><br>
<a href=”wd.html”><b>Wedding Gifts</b></a><br>
&nbsp &nbsp<a href=”wedding-throws.html”>Wedding Throws</a><br>
&nbsp &nbsp<a href=”wd.html”>Monogrammed<br>&nbsp Bathrobes</a><br>
&nbsp &nbsp<a href=”bridal-party-throws.html”>Bridal Party Gifts</a><br><br>
Throws</a><br><br>
</div>
<center>

<div class=”linkad”>
<a href=”comments.html”>Customer Comments</a>
<br><img src=”p/A.GIF” alt=”A”><br><br><br>

<a href=”big-sister-t-shirts.html”>Big Sister<br>T-Shirts</a>
<br><img src=”p/A.GIF” alt=”A”><br><br>
<a href=”big-brother-t-shirts.html”>Big Brother<br>T-Shirts</a>
<br><img src=”p/A.GIF” alt=”A”><br>
</div>

</center><br><br>
<FORM METHOD=”GET” ACTION=”recommend.html”><INPUT TYPE=”submit” VALUE=”Email to Friend”></FORM>
<FORM METHOD=”GET” ACTION=”join-email.html”><INPUT TYPE=”submit” VALUE=”Join Email List”></FORM>
Secure<br>Payments:
<br><br><img src=”http://www.paypal.com/en_US/i/icon/icon_visa.gif” alt=”visa”><br>
<img src=”http://www.paypal.com/en_US/i/icon/icon_mastercard.gif” alt=”mc”><br>
<img src=”http://www.paypal.com/en_US/i/logo/icon_amex.gif” alt=”ax”><br>
<img src=”http://www.paypal.com/en_US/i/icon/icon_discover.gif” alt=”disc”><br>
<img src=”http://www.paypal.com/en_US/i/icon/icon_echeck.gif” alt=”echeck”>
<br><br><img src=”p/A.GIF” alt=”A”>
</td></tr></table>

</td>
</tr></table>

</td></tr>[/CODE]

CSS:

[CODE]body {margin:12px;
background-image:url(“bg.gif”);
color:black;font-size:10pt;font-family:verdana,arial,sans-serif}

tbody {color:black;
background-color:transparent;
font-size:9pt;font-family:arial,helvetica,sans-serif}
table {border:0;
padding:0;
width:100%;
vertical-align:top;
text-align:center;
background-color:rgb(255,255,240);}

td {border:0;
padding:0;
height:100%;}
/*ivory edge & width of green table*/
.menu-ivory
{padding: 8px 0 10px 10px;
vertical-align:top;
height: 100%;
background-color:transparent;
}

/*CellSpacg in HTML is thickness*/
table.menu-green {
width:100%;
border-width:0;
height:100%;
border-collapse: separate;
background-image: url(“bg.gif”);
}

/*Thickness of PINK*/
.menu-pink {
padding: 4px 4px 4px 4px;
vertical-align:top; text-align: left;
background-color: rgb(238,224,229);
}
.menu-bg {
padding: 7px 3px 7px 3px;
vertical-align: top;
height:100%;
background-color: white;
}
/*Space Thickness around text*/
.menu {padding: 8px 3px 7px 5px;
text-align:left;vertical-align: top;
}

.main-ivory {
padding: 9px 9px 9px 10px;
vertical-align:top;
width:100%;
border-width:0;
background-color:rgb(255,255,240);
}

/*CellSpacing in HTML is thickness*/
table.main-green {
width:100%;
border-width:0;
height:100%;
border-collapse: separate;
background-image:url(“bg.gif”);
}
.main-pink {
padding: 4px 4px 4px 4px;
vertical-align:top; text-align: left;
background-color:rgb(238,224,229);
}

.main-bg {
vertical-align:top;
height:100%;
background-color: red;
}

.b1 {padding: 0 10px 0 15px;
vertical-align:top;
text-align:left;
width:62%;
background-color:white;
}
.b2 {padding: 0 10px 0 15px;
vertical-align:middle;
text-align:center;
width:38%;
background-color:white;
}
.bL1 {padding:0;
vertical-align:top;
text-align:center;
width:100%;
background-color:white;
}
.bL2 {padding: 0 45px 0 15px;
vertical-align:top;
text-align:left;
width:100%;
height:100%;
background-color:white;
}
.tlp {padding:0;
vertical-align:top;text-align:left;
width:62%;background-color:white;}

.trp {padding:0;
vertical-align:top;text-align:right;
width:38%;background-color:white;}

.blp {padding:0;
vertical-align:bottom;
text-align:left;
width:62%;background-color:white;}

.brp {padding:0;
vertical-align:bottom;
text-align:right;
width:38%;background-color:white;}[/CODE]

Also in #HTML _↴