css align image right in <li> menu

I've been going round and round with this and thought I would post here.
Got a menu system that expands and contracts. The issue is that I want to align the image to the far right of the column after the text. Basically right justify it so the images all go to the right the same distance. (The expanding and contracting feature is done with JQuery so it won't been see with this code.)

here's the code:
<style>
#sidebar {
width : 163px;
float : left;
padding : 0 0 0 2px;
}
ul.accordion {
margin : 0;
padding : 0;
list-style : none;
}
ul.accordion li {
padding-bottom : 2px;
background : url(/bin/k/g/separator-accordion.gif) repeat-x 0 100%;
width : 153px;
}
ul.accordion a {
line-height : 33px;
color : #406aa1;
font-size : 1.3em;
font-weight : bold;
padding : 0 0 0 0;
letter-spacing : 0px;
text-decoration : none;
}
ul.accordion img {
padding-left : 50%;
}
ul.accordion a:hover , ul.accordion a.active {
color : #7A95BA;
}
ul.accordion .slide {
width : 100%;
overflow : hidden;
background : none;
}
ul.accordion ul {
margin : 0 0 -2px;
padding : 0;
list-style : none;
background : url(/bin/k/g/separator-accordion.gif) repeat-x;
clear : right;
}
ul.accordion ul li {
background : url(/bin/k/g/separator-accordion.gif) repeat-x;
}
ul.accordion ul a {
line-height : 20px;
padding-left : 25px;
font-weight : normal;
letter-spacing : normal;
}
</style>

<div id="sidebar">
<ul class="accordion">
<li><a href="index.htm">Test</a><a class="opener" href="#"><img border="0" hspace="0" alt="" width="10" height="10" src="go_button_purple.gif" /></a>
<div class="slide">
<ul>
<li><a href="annualReports.htm">Annual Reports</a></li>
<li><a href="directorMessage.htm">Director's Message</a></li>

</ul>
</div>
</li>
<li><a href="http://cms.slcolibrary.org/gl/glco/">Contact</a><a class="opener" href="#"><img border="0" hspace="0" alt="" width="10" height="10" src="go_button_purple.gif" /></a>
<div class="slide">
<ul>
<li><a href="contactManagementForm.htm">Contact&nbsp;Management</a></li>

</ul>
</div>
</li>
<li><a href="glem/">Employment</a></li>
<li><a href="glpp/">Policies &amp; Guide.</a>&nbsp;<a class="opener" href="#">+/-</a>
<div class="slide">
<ul>
<li><a href="glpp/index.htm">Policies</a></li>
<li><a href="glpp/index.htm#glGuidelines">Guidelines</a>&nbsp;</li>
</ul>
</div>
</li>

</ul>
</div>

 

Hard to tell without looking at a page in action. Could u setup a dummy page?

 

since your image is inside an a tag and you have an a tag inside each li try this:

ul.accordion ul a {
line-height : 20px;
padding-left : 25px;
font-weight : normal;
letter-spacing : normal;
float:left;
clear:none;
}

ul.accordion ul a.opener{
float:right;
clear:none;
}

 

Or put the images as backgrounds and use background-position. Fewer elements floating around to cause chaos.