Would it be possible to align two separate UL elements next to each other horizontally?
Here is the code that I am currently working with:
<div id="container">
<ul id="list1">
<li></li>
<li></li>
...
<li></li>
</ul>
<ul id="list2">
<li></li>
<li></li>
...
<li></li>
</ul>
</div>
I attempted using the "left: 50%" and then "right: 50%" CSS technique but it did not work as expected.
#container { position: relative; left: 50%; }
#container ul { float: left; position: relative; right: 50%; }
Any suggestions on how to achieve this layout?