I am trying to float an unordered list for a background image to the right of a div and I have almost have achieved it with the code below. However, I have had to use a fixed width to achieve this. How can I get it to have an auto width, so if another li element "4" was added it would still be right aligned.

 ul#slideshow {height: 250px; list-style: none outside none; margin: 0 auto auto; overflow: hidden; padding: 0; width: 630px;}
ul#slideshow li a img {margin: 0 -20px; padding:0; }
#slider-wrapper ul {float: right; width: 120px;}
#fssList {float: right; height: 30px; list-style: none outside none; margin:5px 0 0 0; padding: 0; width: 630px; text-align: right;}
#fssList li { float: left; line-height: 30px; width: 30px; padding-right: 0; margin-left: 5px;}
#fssList li a {color: #fff; text-decoration: none; background: #333 url(layoutimages/slider-bullets.gif) no-repeat 0 0; padding: 0px; width: 30px height:30px font: normal 12px/30px Helvetica, Arial, sans-serif; display: block; text-align: center; }    
#fssList li a:hover, #fssList li.fssActive a {color: #fff; background: #669933 url(layoutimages/slider-bullets.gif) no-repeat 0 -30px;}