Table layout help!

[mimidoll]

Hello everyone, I'm a newbie here and in desperate need of some Table/html coding help!

I have a table and within that, 2 table layout, one on the left and the other to the right. In the left I have buttons aligned horizontally. In the right box next to it is all text and a few pictures. The problem is when I add additional text or images, that table moves up close too another/seperate image above it and causes the buttons in the left to move further down. I need to know what code to add or change so that the top of both the left and right table stay aligned no matter what I add to each. I would think that as I add more content, the height of the table would strech downwards to accomodate it but the top shouldn't budge. I hope this makes sense. I would post the entire coding but not sure if it's allowed here?

Please help!!!!

[mimidoll]

Here is an example of what I mean:
[HTML]
<div align="center"> <table style="border: 3px #c0c0c0 solid; border-collapse:

collapse;"

bgcolor="ff89c3 "

width="675" cellpadding="0" align="center">

<tr>
<td

background="htt p://www.wetnwildmar ia.com/images/collage.jpg

" width="675" height="200" colspan="2">
&nbsp
</td>
</tr>

<tr>
<td background="htt p://www.wetnwildmar ia.com/images/globe13.jpg"

width="675" height="435" colspan="2">&nb sp;</td>
</tr>

<tr align="center">
<td>

<table id="pay" width="150" cellpadding="0" cellspacing="0"

align="center">
<tr>
<td>
<br>
<img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><br>
<img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><br>
<img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><br> <img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><br>
<img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><br>
<img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><br> <img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0">
</td>
</tr>
</table id="pay">

</td>
<td>

<table id="text" style="border: 2px #c0c0c0 solid;

border-collapse: collapse;"

bgcolor="dc74a7 "

width="500" cellpadding="10 " cellspacing="0" align="center">
<tr>
<td align="justify" >
<font color="fffffff" face="century gothic" size="2"><font size="5"><cente r>Hi, I am need help with this coding! Right now, the left and right column are almost aligned at the top, which is fine.
<br>
But when I add more content to this text table, it moves up too close to the globe on top.
<br>
<br>
<font size="3"><font color="94064c"> Please take a look at it and tell me how to fix this. Thank you in advance. </center><br>

<center><img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"> <img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"> <img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><p>< img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"> <img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0">

</td>
</tr>
</table id="text">

<br><img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0">
<br><br>
</td>
</tr>

<tr>
<td

background="htt p://www.wetnwildmar ia.com/images/vida-coll1.jpg

" width="675" height="200" colspan="2">
&nbsp
</td>
</tr>

<tr>
<td colspan="2" bgcolor="#c0c0c 0">

</td>
</tr>

</table>



</td>
</tr></div>
[/HTML]




Now here is the same coding but after I add a few more content to the right column. So my question is, how do I add additional content in the right table without it affecting the position or anything on the left at all and without causing the top of the right column to move up too close to the globe as in my example below?
[HTML]
<div align="center"> <table style="border: 3px #c0c0c0 solid; border-collapse:

collapse;"

bgcolor="ff89c3 "

width="675" cellpadding="0" align="center">

<tr>
<td

background="htt p://www.wetnwildmar ia.com/images/collage.jpg

" width="675" height="200" colspan="2">
&nbsp
</td>
</tr>

<tr>
<td background="htt p://www.wetnwildmar ia.com/images/globe13.jpg"

width="675" height="435" colspan="2">&nb sp;</td>
</tr>

<tr align="center">
<td>

<table id="pay" width="150" cellpadding="0" cellspacing="0"

align="center">
<tr>
<td>
<br>
<img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><br>
<img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><br>
<img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><br> <img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><br>
<img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><br>
<img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><br> <img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0">
</td>
</tr>
</table id="pay">

</td>
<td>

<table id="text" style="border: 2px #c0c0c0 solid;

border-collapse: collapse;"

bgcolor="dc74a7 "

width="500" cellpadding="10 " cellspacing="0" align="center">
<tr>
<td align="justify" >
<font color="fffffff" face="century gothic" size="2"><font size="5"><cente r>Hi, I am need help with this coding! Right now, the left and right column are almost aligned at the top, which is fine.
<br>
But when I add more content to this text table, it moves up too close to the globe on top. Here is an example right now. I have added more text in this column and I'm sure you will notice how this part now moves up close to the globe above, unlike the first example. And you will notice how everything on the left table seems to "fall" downwards.
<br>
<br>
<font size="3"><font color="94064c"> I need to know how to add more content in this table as I just did without it affecting the position of the left table, and without this one moving up to the globe above. Please take a look at it and tell me how to fix this. Thank you in advance. </center><br>

<center><img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"> <img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"> <img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><p>< img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"> <img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0">

</td>
</tr>
</table id="text">

<br><img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0"><img src="http://www.wetnwildmar ia.com/images/journal.gif" border="0">
<br><br>
</td>
</tr>

<tr>
<td

background="htt p://www.wetnwildmar ia.com/images/vida-coll1.jpg

" width="675" height="200" colspan="2">
&nbsp
</td>
</tr>

<tr>
<td colspan="2" bgcolor="#c0c0c 0">

</td>
</tr>

</table>



</td>
</tr></div>[/HTML]

[mochinushi]

You could try using a CSS layout instead, who knows you might like it :)
A few examples can be found here: http://www.bluerobot.com/web/layouts/

Good luck with your dirty site :P