How to position the arrow of this widget correctly?

The html code for the widget header is as follows.

    <div class="widget-header">
                        <span>caption</span>
                                                    <a href="sh/index.php?type=rec">more</a>
                        <img src="/img/widgets/widgets_more.gif" />

    </div>

My CSS code is

.widget-header span { float: left; }
.widget-header a, img { float: right; }

If this, the widgets_more right arrow would position to the left of text 'more' like this,

How can I get the right order with modifying the css code?

Thanks.

Instead of placing the arrow next to the link as an image, you should set it as a background image in a class.

Something like this should do it (untested but should work):

CSS:

a.widgets-more{
    background-image:url(/img/widgets/widgets_more.gif);
    background-position:right;
    background-repeat:no-repeat;
    padding-right:10px;
}

If you want the link to appear on the left of the link, then use the following:

a.widgets-more{
    background-image:url(/img/widgets/widgets_more.gif);
    background-position:left;
    background-repeat:no-repeat;
    padding-left:10px;
}

Then apply the class to your link:

<a class="widgets-more" href="sh/index.php?type=rec">more</a>

Also, the element floated to the right should be stacked above the element floated to the left. So rearrange your HTML to look like this:

<div class="widget-header">
    <a class="widgets-more" href="sh/index.php?type=rec">more</a>
    <span>caption</span>
</div>