Help With Lists...

[smartboyathome]

I am trying to do two lists on my site for my navbar, one would be on the left the other on the right. The problem is, the lists keep ending up one below the other, and I can't get it to stop doing that. Is there any way to get some of the list on one side, and some on the other? Even an overlay would work if I could get it to stop putting the background all the way across on the second one.Here is the relevant CSS code for the navbar:

div.rounded div.middle div.navbar {	margin-top:10px;	margin-left:17px;	margin-right:22px;}div.rounded div.middle div.navbar ul {	padding-left: 0;	margin-left: 0;	background:url(./images/toolbar-background.png) repeat-x;	color: #fff;	width: 100%;	float: left;	font-family: arial, helvetica, sans-serif;}div.rounded div.middle div.navbar ul li {	display: inline;}div.rounded div.middle div.navbar ul li a {	padding: 0.2em 1em;	color: White;	text-decoration: none;}div.rounded div.middle div.navbar ul li a {	float: left;	border-right: 1px solid #fff;}div.rounded div.middle div.navbar ul li a:hover {	background:url(./images/toolbar-background-hover.png);	color:#fff;}

Thanks to all who help!

[thescientist]

div.rounded div.middle div.navbar ul li a { float: left; border-right: 1px solid #fff;}

i think this is what is causing everything to float left. you should make a div for your left nav (float: left;), and a div for your right nav, and float those elements right (float: right;).