position two unordered lists (horizontal) side-by-side

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;
}

Code (markup):

<div id="subnavinfo">
	<ul class="l">
	        <%call sForumNavigation()%>
	</ul>
	<ul class="r">	
		<li>
			<a title="Billiard Directory" href="http://dev.info/billiard-books.asp" class="hedge">
			Billiard Books</a>
		</li>
		<li>
			<a title="Pool Halls" href="http://dev.info/pool-halls.asp">
			Pool Halls</a>
		</li>
		<li>
			<a title="Pool Tournaments" href="http://dev.billiardsforum.info/pool-tournaments.asp">
			Pool Tournaments</a>
		</li>
		<li>
			<a title="Billiard Directory" href="http://dev.info/billiard-articles/billiard-movies.asp">
			Billiard Movies</a>
		</li>
		<li>
			<a title="Billiards Video" href="http://dev.info/billiards-video.asp">
			Billiards Video</a>
		</li>
	</ul>
</div>

Code (markup):

 

Use this

#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
{
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
{
clear: none;
float: left;
}

#subnavinfo ul.l li {
display: inline;
}
#subnavinfo ul.r li {
display: inline;
}

Code (markup):

and this

<div id="subnavinfo">
	<ul class="l">
		<%call sForumNavigation()%>
	</ul>
	<ul class="r">	
		<li>
			<a title="Billiard Directory" href="http://dev.info/billiard-books.asp" class="hedge">
			Billiard Books</a>
		</li>
		<li>
			<a title="Pool Halls" href="http://dev.info/pool-halls.asp">
			Pool Halls</a>
		</li>
		<li>
			<a title="Pool Tournaments" href="http://dev.billiardsforum.info/pool-tournaments.asp">
			Pool Tournaments</a>
		</li>
		<li>
			<a title="Billiard Directory" href="http://dev.info/billiard-articles/billiard-movies.asp">
			Billiard Movies</a>
		</li>
		<li>
			<a title="Billiards Video" href="http://dev.info/billiards-video.asp">
			Billiards Video</a>
		</li>
	</ul>
	<br clear="all" />
</div>

Code (markup):

 

thanks, that did the trick!

Now in IE7 that outer div is showing 2 pixels too narrow:

#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;
height: 17px;
} 

Code (markup):

Any suggestions?

 

Try using the !important CSS tag to fix any pixel differences between IE and FF.
I am not able to reproduce that 2px diff on my end though.

 

ahh bugger, I had a script that was inserting a few characters above my doctype, which was throwing IE in to quirks mode.

Fixed now, and your earlier post solved my initial issue. rep for you!

thanks!

 

Symantec software may also add lines to your websites sourcecode as it was doing when I had it installed, about 3 years ago
Anyway, glad I gould help!