Problème de mise en page

Bonjour,
voila j'ai mon site web en place et je compte ajouter certaines chose comme un moteur de recherche et une "horloge".

voici mon site www.pumaworld.fr

et voici le code isolé que j'ai fais, il marche nickel mais je n'arrive pas à le mettre en forme, je m'explique je voudrai que l'horloge et le moteur de recherche soit à la même hauteur. l'un dans la continuité de l'autre.
au lieu de cela j'ai ce résultat.

<li><a href="Accueil pumaworld.html" title="aller à la section 1"><strong>ACCUEIL</strong></a></li>
<li><a href="http://www.pumafrance.fr/forum" title="aller à la section 2"><strong>FORUM</strong></a></li>
<li><a href="Partenaire.html" title="aller à la section 3"><strong>PARTENAIRE</strong></a></li>
<li><a href="Lexique.html" title="aller à la section 4"><strong>LEXIQUE</strong></a></li>
</div>
<form action="http://www.google.fr/recherche/" id="cse-search-box">
<div id="google">
<input type="hidden" name="cx" value="partner-pub-0795174221178624:134yfq-im4s" />
<input type="text" name="q" size="31" id="google"/>
<input type="image" name="sa" src="../css/images/commun/button_ok.gif" value="OK" />
<script type="text/javascript" src="https://cse.google.com/coop/cse/brand?form=cse-search-box&lang=fr"></script>
</div>
</form>

<table width="557" height="31" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td width="3%"><div align="right"></div></td>
<td width="5%" background="Image/noir.png" > </td>
<td width="33%" background="Image/noir.png"><script language="javascript">affichdate(); </script></td>
<td width="5%" background="Image/noir.png"> </td>
<td width="17%" background="Image/horloge.gif" ID=ejs_server_heure align="left" ></td>
<td width="5%" background="Image/noir.png"> </td>
<td width="27%" background="Image/noir.png"><font size=2> <b> 
<script language="JavaScript" src="infos/marqueur2.js"></script>
visiteurs</b></font></td>
<td width="2%"><div align="left"></div></td>
<td width="3%"> </td>
</tr>
</table>