Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

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

Status
Not open for further replies.

gwrman

IS-IT--Management
Dec 20, 2005
94
CA
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:

Code:
#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:
<div id="subnavinfo">
	<ul class="l">
	        <%call sForumNavigation()%>
	</ul>
	<ul class="r">	
		<li>
			<a title="Billiard Directory" href="[URL unfurl="true"]http://dev.info/billiard-books.asp"[/URL] class="hedge">
			Billiard Books</a>
		</li>
		<li>
			<a title="Pool Halls" href="[URL unfurl="true"]http://dev.info/pool-halls.asp">[/URL]
			Pool Halls</a>
		</li>
		<li>
			<a title="Pool Tournaments" href="[URL unfurl="true"]http://dev.billiardsforum.info/pool-tournaments.asp">[/URL]
			Pool Tournaments</a>
		</li>
		<li>
			<a title="Billiard Directory" href="[URL unfurl="true"]http://dev.info/billiard-articles/billiard-movies.asp">[/URL]
			Billiard Movies</a>
		</li>
		<li>
			<a title="Billiards Video" href="[URL unfurl="true"]http://dev.info/billiards-video.asp">[/URL]
			Billiards Video</a>
		</li>
	</ul>
</div>
 
It's hard to say without seeing it, but have you tried floating the <ul>s as well. That could make an additional line drop for the second list.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top