CSS - Få elementer til at stå efter hinanden

Hej
Jeg har et problem med en menu, hvor elemeterne skal stå efter hindanden.
I får lige koden:
HTML:
<div id="menu">
<a href="#" class="menuitem">Menupkt1</a>
<img src="images/menuspacer.jpg">
<a href="#" class="menuitem">Menupkt2</a>
<img src="images/menuspacer.jpg">
</div>

CSS:
#menu{
    width:500px;
    height:100px;
    background:#fff url(images/menubg.jpg) repeat-x;
    float:right;
    clear:right;
    margin-top:15px;
}

.menuitem{
    display:inline;
    height:33px;
    border:1px solid #000;
    float:left;
    padding-top:15px;
    color:#fff;
    font-family:Helvetica, Arial, sans-serif;
    font-size:16px;
    font-weight:bold;
    text-transform:uppercase;
}


Problemet er at elementerne ikke kommer efter hinanden, men hopper ned på næste 'linie', selvom jeg har sat display:inline;
Hvordan kan det være? Og hvordan kan jeg løse problemet? :)