Sprite con comportamiento de imagen

[cyber_dark]

Saludos estoy teniendo un pequeño problemita con los iconos de mi web, pues si pongo esto:

.icono { background: url(iconos.png) no-repeat; display:block;}
.1 { background-position: 0px 0px; width: 14px; height: 14px; }
.2 { background-position: -24px 0px; width: 14px; height: 14px; }

Al llamarlo

Contenido... <span class="icono 1"></span> Contenido...

El resultado es este:

Contenido...
(icono)
Contenido...

Lo cual es obvio por display:block. Pero cuando pongo float:


.icono { background: url(iconos.png) no-repeat; display:block; float:left;}
.1 { background-position: 0px 0px; width: 14px; height: 14px; }
.2 { background-position: -24px 0px; width: 14px; height: 14px; }

Al llamarlo

Contenido... <span class="icono 1"></span> Contenido... <span class="icono 1"></span>

El resultado es este:

(icono) (icono) Contenido... Contenido...


Todos los iconos se van a la derecha, lo que deceo es que se comporte como una imagen, es decir:

Contenido... (icono) Contenido... (icono)

Alguna idea de como solucionar esto?

[vdaniel07]

coloca dentro de una div span y contenido de esta manera:

<div>
<span class="icono 1"></span>
contenido
</div>
<div>
<span class="icono 2"></span>
contenido
</div>

[vdaniel07]

Iniciado por vdaniel07

coloca dentro de una div span y contenido de esta manera:

<div>
<span class="icono 1"></span>
contenido
</div>
<div>
<span class="icono 2"></span>
contenido
</div>

.1{float: right....} .2{float: right...}