Problem aligning Two ul's

I can't seem to get these 2 navigation lists to line up the way that I want.

Relevant Code: (html)

<div id="navwrap">

<div class="art-nav">
	<ul class="art-menu">
		<li>Home</li>
                <li>gallerytest</li>
                <li>Portfolio</li>
	</ul>
</div><div id="spritewrapper">
<ul class="cssmenu">
	<li class="facebook"><a href="#" title="facebook"><span class="displace">facebook</span></a></li>
	<li class="twitter"><a href="#" title="twitter"><span class="displace">twitter</span></a></li>
	<li class="myspace"><a href="#" title="myspace"><span class="displace">myspace</span></a></li>

	<li class="itunes"><a href="#" title="itunes"><span class="displace">itunes</span></a></li>
</ul>
</div>


[B][U]css:[/U][/B]

.art-nav {
  position: relative;
  height: 30px;
  z-index: 100;
  width: 630px;
}

#navwrap {
  height: 30px;
  width: 100%;
}

#spritewrapper {
  height: 30px;
  float: right;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  list-style-type: none;
  display: inline-block;
  width: 250px;
}

ul.cssmenu {
	list-style: none;
	padding: 0px;
        z-index: 10;
	}

.displace {
	position: absolute;
	left: -5000px;
	}

ul.cssmenu li {
	float: left;
	}

ul.cssmenu li a {
	display: inline-block;
	width: 50px;
	height: 25px;
	background: url('..theurl.com');
	}

Code (markup):

This may be too much to put in here, but basically: there are two unordered list menu/navigation bars that need to be on the same alignment vertically on the page. One menu on the left, one on the right. What keeps happening is that the one on the right is pushed down below the one on the left- but still floats to the right. Does this make sense? I'd be happy to provide a link via pm or whatever. I've been working at this for a week and can't seem to get it.

 

If you are going to nest a ul inside another ul it has to be encased in an li. See code below for example.

<ul>
 <li> 
  <ul>
   <li>woot</li>
  </ul>
 </li>
</ul>

Code (markup):

 

have you tried with tables? I know you are using div's , but usually the best way to align something is using a table..so so simple.

 

Thanks for the reply! I know that I could wrap this in a table and have it done in a second. However.. a great css coder could do this. I'm trying learn to be great with css- and I'd like to do this without the use of tables. Does anyone know how to accomplish this?

 

Thanks for the reply pc user. A nested ul is not, however, what I'm trying to accomplish here. This is a css issue.

 

So after a couple of mis-lead attempts to help.. I've decided that perhaps I can clarify what I'm trying to say... here is a quick and simple illustration of my problem:

this is what I want:
Header
link1 link2 link3 link4 iconlink1 iconlink2 inconlink3

content

and here is what I have:
Header
link1 link2 link3 link4
iconlink1 iconlink2 inconlink3

content

see the difference? there is this annoying line break between the two sets of menus on the second example. I need to get rid of that.

 

Hey Matts99, You are overcomplicating things here.

When you float things next to each other, you have to remember to clear them. Don't forget, instead of clearing floated items, you can also just set the containing wrapper to overflow:hidden.

You are using unnecessary divs, you can apply most of the styles straight to the ul items.

The following should get you started.

CSS:

#navwrap { overflow:hidden; }
.art-menu, .cssmenu { list-style:none; list-style-position:outside; margin:0; padding:0; }
.art-menu { float:left; width:auto; display:inline-block }
.cssmenu { float:right; width:auto; display:inline-block }
.art-menu li, .cssmenu li { float:left; display:inline; width:auto; margin:0 10px; padding:0 }

Code (markup):

xHTML:

<div id="navwrap">
    <ul class="art-menu">
      <li>Home</li>
      <li>gallerytest</li>
      <li>Portfolio</li>
    </ul>
    <ul class="cssmenu">
      <li class="facebook"><a href="#" title="facebook"><span class="displace">facebook</span></a></li>
      <li class="twitter"><a href="#" title="twitter"><span class="displace">twitter</span></a></li>
      <li class="myspace"><a href="#" title="myspace"><span class="displace">myspace</span></a></li>
      <li class="itunes"><a href="#" title="itunes"><span class="displace">itunes</span></a></li>
    </ul>
</div>

Code (markup):

Hope this helps you.

Also, ignore anyone who tells you to layout a site in tables.

 

This works, but I'm still having an issue with the alignment. The list on the right is still not aligned as high as it should be. I have another area just below it that is overlapping it. But again, this is because this one on the right is too low. Any other suggestions?