HTML Table redesign

I am redesigning my website so that the right navigation categories -Occasion and Project Type - are side by side ([http://www.merrimentdesign.com][1]). However, when I implement the table, I can't seem to get them to align correctly. Here is my code:

I've taken some of yo开发者_如何学Gour advice and div'd them up as opposed to using tables. But now, I'm wondering how to style them so that they are side by side. New with CSS so bear with me.

<div id="right">
<table class="categories">
<tr>
<td>
<img class="categories" src="<?php bloginfo('url'); ?>/images/sidebar.gif" alt="Let The Merriment Begin..." title="Let The Merriment Begin..." /></td>
</tr>

<tr>
<td class="categorycontent">
<br />
<div id = "occasion">
<h1>Occasion</h1>
<ul>
<?php wp_list_categories('show_count=1&title_li=&child_of=537'); ?>
</ul>
</div>

<div id = "ptype">
<h1>Project Type</h1>
<ul>
<?php wp_list_categories('show_count=1&title_li=&child_of=538'); ?>
</ul>
</div>

float:right; the div with a fixed width, float:left; the list elements within? I can't really tell what it is you are asking but from looking at your site, it seems that's what you want to do.

What's wrong with how it is displayed now? That is, what is the result you'd like to have?

If you'd go tableless, which some of the commenters suggested (and I do too), you'd solve this using divs instead. Have a look at for instance http://webdesign.about.com/od/css/a/aa102102a.htm to learn more about how to do that. Or google "tableless css" for even more.