Jak wyrównać część listy do prawej, a część do lewej w CSSie?

Mam problem, otóż chcę zrobić tak wyglądające menu:

Kod HTML wygląda tak:

<div id="menu">
  <ul>
    <li><a href="http://www.google.pl">home</a></li>
    <li>for users</li>
    <li>for programmers</li>
    <li>download</li>
  </ul>

  <ul>
    <li><a href="http://www.google.pl">contact</a></li>
    <li>join</li>
    <li>site map</li>
    <li>goodies</li>
  </ul>
</div>

CSS:

#menu {
    background: #F28F00;
    display: block;
    height: auto;
    margin: -8px -8px 0;
}

#menu ul li, #menu p {
    color: aqua;
    display: table-cell;
    font-family: Trebuchet MS;
    font-size: 18px;
    height: 40px;
    padding-left: 24px;
    vertical-align: middle;
}

#menu ul {
    display: inline;
}

W CSSie kombinowałam najpierw z text-align, nie poszło, potem był float, działało tylko pod Mozillą. W Operze co prawda wyświetliło mi po prawej, ale linijkę niżej. Znalazłam jakiś wątek w Google, próbowałam, ale też coś jest nie halo.
Ma ktoś jakiś pomysł? Bo mnie się skończyły :/

Do #menu dodaj overflow: auto;, pierwszej liście daj float: left, a drugiej float: right.