Creare div con icone ai lati

[Veronica80]

Ciao a tutti! Premetto che di CSS so davvero poco e niente!

Sto cercando (invano) di realizzare una classe da applicare a un div o a un paragrafo o quello che sia che mi crei un bel rettangolo dove ho: a sinistra un icona con del testo affianco e a destra un'altra icona!

In sostanza il problema è che quella di destra deve stare sempre sul lato destro se ridimensiono, mentre quella di sinistra e il testo su quello di sinistra..


Spero di essermi spiegata xD Se no vi faccio una grafica della cosa così forse è più chiaro!

Grazie

[fcaldera]

le icone sono puro stile oppure fanno parte integrante del contenuto?
hanno dimensioni fisse? quali?
devono essere "ancorate" verso l'alto?

[Veronica80]

le icone sono fisse (16x16) a me interessa che stiano centrate verticalmente e che una stia a sinistra e l'altra a destra

[ShiroKen87]

Non so se ho capito bene, ma perchè non provi a separare lo spazio in due colonne:

<div style="float: left; width: 50%;">
icona sinistra
</div>
<div style="float: right; width: 50%;">
icona destra
</div>

[Nobody33]

che stiano centrate verticalmente e che una stia a sinistra e l'altra a destra

Forse è meglio se fai un grafico, posti un po di codice, un link ad una pagina o simile (di più è, di meglio è)

[fcaldera]

Ecco un esempio che considera le icone come parte dello stile (e quindi non nel markup): http://jsbin.com/aVIjAcO/1/edit

markup

<div class="withicon">
    
     

For now, since by many prolonged, repeated experiences, I have perceived that in all cases man must eventually lower, or at least shift, his conceit of attainable felicity; not placing it anywhere in the intellect or the fancy; but in the wife, the heart, the bed, the table, the saddle, the fireside, the country; now that I have perceived all this, I am ready to squeeze case eternally. </p>

    

In thoughts of the visions of the night, I saw long rows of angels in paradise. Now, while discoursing, it behooves to speak of other things akin to it.</p>

</div>

Css

.withicon {
  position: relative;  
  padding: 0 30px;
}

.withicon:before,
.withicon:after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -8px;
  border: 1px #ccc solid;
  width: 16px;
  height: 16px;
  display: inline-block;
}

.withicon:before { left:0; background: url(iconadestra.png) top let no-repeat; }
.withicon:after { right:0;  background: url(iconasinistra.png) top let no-repeat; }

le icone restano centrate verticalmente rispetto all'ampiezza del testo che le contiene