Can't get the menu horizontal

I am trying a CSS rollover tutorial
(http://www.elated.com/articles/css-rollover-buttons/) and it is working
nicely but I can't get it
to be horizontal.

My CSS looks like this:
---
#gallery
{
display: block;
width: 48px;
height: 48px;
background: url("images/rollovers/gallery.gif") no-repeat 0 0;
}

#gallery:hover
{
background-position: 0 -48px;
}

#gallery span
{
display: none;
}

#contact
{
display: block;
width: 48px;
height: 48px;
background: url("images/rollovers/contact.gif") no-repeat 0 0;
}

#contact:hover
{
background-position: 0 -48px;
}

#contact span
{
display: none;
}
---

and my html looks like this:
---
<p>
<a id="gallery" href="#" title="Gallery"><span>Gallery</span&g
t;</a>
<br>
<a id="contact" href="#" title="Contact"><span>Contact us</span></a>
</p>
---


Here is a test link:
http://www.flipside.co.uk/~cwlinde/test/test.html but I want the buttons
to the left and right of each other - not on top of each other, like
this:
http://www.flipside.co.uk/~cwlinde/t...ages/test2.png

The solution's most probably staring me right in the face but I am
stuck! Help!

re: Can't get the menu horizontal

In article <g4e5rt$qbj$1@aioe.org>, "©®" <n0ne@n0ne.comwrote:
Here is something from the dorayme dirty tricks factory which is open
this morning for the next few minutes:

Try

<p style="float: left;"><a id="gallery" href="#"
title="Gallery"><span>Gallery</span></a></p>

<p style="float: left;margin-top: -5px"><a id="contact" href="#"
title="Contact"><span>Contact
us</span></a></p>

<p style="clear:left;"><font face="'Lucida Sans Unicode', Tahoma,
Verdana, Verdana, Arial, Helvetica, sans-serif" size="-1">Lorem....

--
dorayme

re: Can't get the menu horizontal

"©®" <n0ne@n0ne.comwrites:
You need to find another tutorial, this time about menus. The usual
method is to float each item left.

--
Ben.

re: Can't get the menu horizontal

TryThanks very much - it worked!