Right Align an inline UL which is inside a div

Question

I have a pagination output which is show within

. An example is posted here: http://jsfiddle.net/6N4bD/1/

The ul is wrapped around 2 divs

1st div is 550 width 2nd div called "paginationDiv" basically wraps the ul around

The ul has list-style: none. What I am trying to do is make it float right, but it keeps appearing as a block. I have tried quite a few things but nothing seems to work. If I add a width to the paginationDiv then it works but it's not accurate because it will never be fixed width

Here is what it looks like:

<div class="parentDiv">
   <div class="paginationDiv">
      <ul id="paginationLinks">
        <li>Page 1</li>
        <li>Page 2</li>
      </ul> 
    </div>
 </div>

That's the html code

Here is the css:

div.parentDiv { 
  width: 550px; 
}
div.paginationDiv {
  float: right;
}
#paginationLinks ul {
  border: 0;
  padding: 0;
  margin: 0;
}
#paginationLinks li {
  list-style: none;
}

I have posted an example here: http://jsfiddle.net/6N4bD/1/

Answer 1

give float:left to #paginationLinks li and then see the result