How to stack these tables?

As you can see from the attached image, the black box is side-by-side with the gray box.
I'd like the gray box to be directly underneath the black box. How can I accomplish this? Thanks

Here is the code:
HTML

<td class="login3">
<br/><table>
<tr><td>
<form method="get" action="search.php">
<div id="siteSearch">
<!--<input type="hidden" name="hl" value="en" />-->
<input type="hidden" name="type" value="videos"/>
<input align="middle" type="text" name="keyword" id="myField"/>&nbsp;&nbsp;<input type="image" src="images/" name="sa" value="Search" id="mySearch"/>
</div>
</form>
</td></tr></table>

<td class="login4">
<table>
<tr><td>
<form action="login.php" method="post" accept-charset="UTF-8" class="middletext">
<label>Username</label><span class="username"><input type="text" name="user_name_login" size="9" style="width:70px;" />
<label>Password</label><span class="password"><input type="password" name="password_login" size="9" style="width:70px;" />
<input type="submit" value="[var.lang_login_now]" class="btn_vid1" /></a><!--<a href="login.php"></a>-->
<input type="hidden" name="submitted" value="yes" />
<input type="hidden" name="remember_me" value="remember_me" />
</form>
</td></tr></table>

Code (markup):

CSS:

td.login3 {
background:#000000;
text-align: center;
padding-right:10px;
padding-left:10px:
padding-top:10px;
background-position:top;
padding-bottom:0px;
margin:0px 0px 0px 0px;
width:0px;
height:0px;

}

td.login4 {
background:#696969;
text-align: center;
padding-right:0px;
padding-left:0px:
padding-top:0px;
background-position:bottom;
padding-bottom:0px;
margin:0px 0px 0px 0px;
width:0px;
height:0px;

}

Code (markup):

 

Thanks. Can you give me a code example of what you're describing?

 

You'd probably want to structure your elements within a table better (or just use divs).

Like

<table>
<tr>
   <td="first element">
    Content
   </td>
</tr>
<tr>
     <td="second element">
     Content
</td>
</tr>
</table>

Code (markup):