List items need to span the width of a div

ul and li CSS basics

[SilverLining]

I have an unordered list with two list items. The content which is displayed in the list is pulled from a DB. I have set a width for the containing div and also for the list items so that they can fit into a row and be displayed side by side.

Ideally I want the first li to float left and the second li to float right. I have tried separating them by a right margin on the "li" but this obviously affects both lists which means there is a space between the right list item's right margin and the right border of the "unorderedList" until the margin to too wide and it is forced into the next line.

I've tried using li:first-child but this only works in IE and isn't flush on the right hand side.

<!-- html -->
<ul class="unorderedList">
<li class="list">List one</li>
<li class="list">List two</li>
</ul>

/* CSS */
.unorderedList { list-style: none; padding: 0px; margin: 0; clear: left; width: 519px; }
.list { width: 248px; float: left; margin: 0 5px 0 0; }

Knowledge from the experts would be great, thank you!

[SilverLining]

it's actually more like

<ul class="unorderedList"> 
<li class="list">val</li> 
</ul>