[SOLVED] Align Right issue (List of Page numbers flip)

[Skipjackrick]

I just can't seem to get the page numbers to align properly on the right side of the page.

 

I want the image on the far left and the page numbers on the far right.  But I can't get it to position correctly with my current CSS. 

 

Can you guys give me a little help?  When I set the float to "right" the page numbers flip around the opposite way!!!!

 

Here is what is looks like so far.

http://www.watermansvideo.com/wof/wof.php?currentpage=2

 

The code I am in reference too.

 

<img src="http://www.watermansvideo.com/wof/mostrecent.jpg" alt="watermansvideo.com">

<ul class="pagination">  
   <li class="next"><a href="/wof/wof.php?currentpage=1">First <<</a></li>
   <li><a href="/wof/wof.php?currentpage=1"><</a></li>  
   <li><a href="/wof/wof.php?currentpage=1">1</a></li>  
   <li class="active"><b>2</b></li>  
   <li><a href="/wof/wof.php?currentpage=3">3</a></li>
   <li><a href="/wof/wof.php?currentpage=3">></a></li>
   <li class="next"><a href="/wof/wof.php?currentpage=3">Last >></a></li> 
</ul>

 

 

And of course my css

/* Pagination
---------------------------------------- */
ul {
     border:0; 
     margin:0; 
     padding:0;
}

.pagination li {
     border:0; 
     margin:0; 
     padding:0;
     font-size:11px;
     list-style:none;
     margin-right:2px;

}

.pagination a {
     border:solid 1px #9aafe5;
     margin-right:2px;

}

.pagination .previous-off, .pagination .next-off {
     border:solid 1px #DEDEDE;
     color:#888888;
     display:block;
     float:left;
     font-weight:bold;
     margin-right:2px;
     padding:3px 4px;
}

.pagination .next a, .pagination .previous a {
     font-weight:bold;
}

.pagination .active {

     background:#2e6ab1;
     color:#FFFFFF;
     font-weight:bold;
     display:block;
     float:left;
     padding:4px 6px;
}

.pagination a:link, .pagination a:visited {
     color:#9aafe5;
     display:block;
     float:left;
     padding:3px 6px;
     text-decoration:none;
}

.pagination a:hover {
     border:solid 1px #0e509e;
     background:#2e6ab1;
     color:#FFFFFF;
}

 

Can you guys give me a little help?  When I set the float to "right" the page numbers flip around the opposite way!!!!

[merylvingien]

Right, i got it to work ok.

I added a div to the links, so:

 

 

<div id="test">
<ul class="pagination"> 
   <li class="next"><a href="/wof/wof.php?currentpage=1">First <<</a></li>
   <li><a href="/wof/wof.php?currentpage=1"><</a></li> 
   <li><a href="/wof/wof.php?currentpage=1">1</a></li> 
   <li class="active"><b>2</b></li> 
   <li><a href="/wof/wof.php?currentpage=3">3</a></li>
   <li><a href="/wof/wof.php?currentpage=3">></a></li>
   <li class="next"><a href="/wof/wof.php?currentpage=3">Last >></a></li>
</ul>
</div>

 

Then for the css:

 

div#test {float: right;}
div#test li {display: inline;}

[Skipjackrick]

Aye, thanks.... that did the trick.