HTML+CSSの要素の配置についての質問です｡親要素の中に子要素が2つある要素があるとします｡ <div> <span class='koyouso'>子要素</span> //文字列が入る｡折り返しな…

HTML+CSSの要素の配置についての質問です｡
親要素の中に子要素が2つある要素があるとします｡
<div>
<span class='koyouso'>子要素</span> //文字列が入る｡折り返しなどもする｡
<span class='gazou'>画像</span> //画像のｻｲｽﾞは固定です｡(24px*24px)
</div>

子要素と画像を2つ横に並べるために子要素1に
.koyouso{
float:left;
width:95%;
display:inline;
}
を定義し､画像のｽﾀｲﾙに
.gazou {
background:url('../img/img.png') no-repeat scroll center;
float:right;
width:24px;
height:24px;
display:inline;
}
を指定すると画像が回り込み目的は達成できてるのですが
Twitter Bootstrap を元にｻｲﾄを構築していて横幅が可変長のためｽﾏｰﾄﾌｫﾝだと回り込まなくなってしまいます｡
(子要素の横幅を90%にすればｽﾏﾎでも回り込むのですが今度はPCだと不自然に空白が出来てしまう｡)

できれば右に回り込む画像の横幅を24pxの固定にし､左の子要素は可変長を維持するようなｽﾀｲﾙを定義したいのですが
可能でしょうか？
詳しい方お助けください｡

画像と､文字列が入る要素の順序を入れ替えてますけど､ふたつほど｡

画像だけに float: right; を指定する｡

<style>
.koyouso{
 /* ※ float と width の指定を外す
 float:left;
 width:95%;
 */
 display:inline;
}
.gazou {
 background:url('../img/img.png') no-repeat scroll center;
 float:right;
 width:24px;
 height:24px;
 display:inline;
}
</style>
<div>
<span class='gazou'>画像</span> <!-- ※画像の要素を先にする -->
<span class='koyouso'>子要素</span>
</div>

↑だと､文字列は､画像の下に流れ込む(float の普通の動作)感じになります｡
もし､文章が入る領域の幅を一定にして､画像の下は空けておきたいのであれば､こんな感じ｡

<style>
.koyouso {
 display:block; /* ※ */
 padding-right: 30px; /* ※24px 以上､右側の padding を取る */
}
.gazou {
 background:url('../img/img.png') no-repeat scroll center;
 width:24px;
 height:24px;
 display:block; /* ※ */
 position: absolute; /* ※ */
 right: 10px; /* ※親要素の padding などに合わせて調整 */
}
</style>
<div>
<span class='gazou'>画像</span> <!-- ※画像の要素を先にする -->
<span class='koyouso'>子要素</span>
</div>