List beside image

[Gibble]

I'm trying to align an unordered list (ul) beside (to the right of) an image.

<div id="banner">
      <img src="images/logo.gif" style="vertical-align: top;"/>
      
  <div id="menu">
    <ul>
          <li>Item Number 1</li>
          <li>Item Number 2</li>
          <li>Item Number 3</li>
          <li>Item Number 4</li>
          <li>Item Number 5</li>
          <li>Item Number 6</li>
          <li>Item Number 7</li>
          <li>Item Number 8</li>
          <li>Item Number 9</li>
        </ul>
      </div>
    </div>

It's not working at all...I'm still messing with it, but if someone has a simple way to do this, it would be great.

Thanks,
-C

[Gibble]

And the relevant css

#banner {
clear: both;
width: 800px;
height: 330px;
background: url('../images/header_bg.jpg');
padding-top: 50px;
}
#menu 
{
width: 50px;
background-color: rgb(150, 150, 150);
display: inline;
}

[rocknbil]

You may want to clearly define in what way "it's not working." I'll presume it's just "stacking."

Try floating the image to the left, or put #menu FIRST in the HTML and float it right. You will probably have to play with the margin and padding on the list as FF and IE act a bit differently on lists. Start by setting #menu and #menu li to margin:0 padding:0.

You probably won't need display: inline either.

[Old_Honky]

If you want menu to the right of banner, in your css remove "clear: both;" from banner.