I have a div, that houses 2 unordered lists.

The lists need to be side by side, but at opposite ends, so that there is a space, if any, in the middle.

I've got it looking correct in IE, but FF places the right hand UL one line lower than they left. they need to be on the same line.

Here is what I have:

#subnavinfo
{
margin: 0 auto;
width: 954px;
background-color: #f0f0f0;
border-right: 1px solid #d0d0d0;
border-left: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
font-size: 11px;
padding: 6px 0;
/*margin-top:expression(-2+"px"); causing problems in IE Win*/
} 
#subnavinfo ul
{
list-style: none;
margin: 0;
padding: 0 10px 0 0;
overflow: hidden;
}
#subnavinfo ul.r li
{
clear: none;
float: right;
}
#subnavinfo ul li a
{
padding: 0 0.7em;
}
#subnavinfo ul li a.hedge
{
padding: 0 0.7em;
}
#subnavinfo span
{
float: left;
padding: 0 0 0 12px;
}
#subnavinfo ul.l li
{
clear: none;
float: left;
}

<div id="subnavinfo">
<ul class="l">
 <%call sForumNavigation()%>
</ul>
<ul class="r">
<li><a title="#" href="#" class="hedge">Billiard Books</a></li>
<li><a title="#" href="#">Pool Halls</a></li>
<li><a title="#" href="#">Pool Tournaments</a></li>
<li><a title="#" href="#">Billiard Movies</a></li>
<li><a title="#" href="#">Billiards Video</a></li>
</ul>
</div>

[edited by: SuzyUK at 5:34 am (utc) on Feb. 18, 2007]
[edit reason] examplied code, removed urls [/edit]