float e 100% larghezza

[Trinità]

ciao a tutti ho un problema di layout con css. Avrei una struttura di questo tipo

<div class="contenitore">
<div class="scritta">ciao ciao</div>
<div class="icona"><img .../>
</div>

il tutto viene generato dinamicamente estraendo i dati da database.

il div con class contenitore (non sò se indispensabile ma cmq non produce output direttamente visibile) c'è sempre

il div con class "scritta" c'è sempre e io vorrei che assumesse sempre la larghezza massima possibile e voglio che sia sempre allineato a sinistra

il div "icona" contiene appunto un link su di un'icona di 22 px. Quest'ultimo div può esserci come no e voglio che sia sempre allineato a destra (float right)

problema :
1) vorrei che scritta ed eventualmente icona siano tutte su di una riga senza a capo
2) la scritta deve prendere tutta la larghezza , quindi 100% se non c'è nulla, un pò meno se c'è anche l'icona. Ma non voglio da programma mettere un margin right se c'è o no l'icona.

se metto float left alla scritta, il layout viene come desiderato ma la larghezza del div scritta contiene al massimo il suo contenuto non andando al 100% dello spazio disponibile.

sapete come posso fare ?

[Mich_]

Secondo me devi rivedere anche l'HTML:

HTML:
<div class="contenitore">
  <p class="scritta">
    ciao ciao<img ... />
  </p>
</div>

CSS:
.contenitore {
  ...
  /*... deve essere specificata una larghezza */
}
.contenitore .scritta{
  width: 100%;
  height: ...;
  background: ...;
}
.contenitore a {
  float: right;
  height: 100%;       /* probabilmente serve per evitare bordini dello sfondo del p */
  background: ...;    /* se necessario, per nascondere lo sfondo del p */
}

Nota l'uso di tag semanticamente corretti (i tuoi non lo erano)

[Trinità]

ciao grazie intanto, non erano corretti semanticamente per l'uso del tag div contenente solo testo ?

in ogni caso il p va sempre e comunque al 100% invece io vorrei che in presenza dell'icona si fermasse prima, cioè riempia il 100% dello spazio disponibile (quindi 100% - 22px circa dell'icona)

devo gestire degli hover sull'icona e sulla scritta che vengono scatenati ugualmente quando sono sull'icona poichè sotto c'è anche il tag della scritta

[Mich_]

Originariamente inviato da Trinità
ciao grazie intanto, non erano corretti semanticamente per l'uso del tag div contenente solo testo ?

Si`. E poi c'erano alcuni blocchi inutili.

in ogni caso il p va sempre e comunque al 100% invece io vorrei che in presenza dell'icona si fermasse prima, cioè riempia il 100% dello spazio disponibile (quindi 100% - 22px circa dell'icona)

Se usi correttamente le altezze, ti appare come vuoi. Il fatto che il

vada fino in fondo viene nascosto dall'immagine. E comunque se dai uno sfondo opaco al tag <a> e lo stesso tag <a> e` alto quanto il

non vedi lo sfondo sotto e l'<a> ti resta sopra.

devo gestire degli hover sull'icona e sulla scritta che vengono scatenati ugualmente quando sono sull'icona poichè sotto c'è anche il tag della scritta

Come dicevo il tag <a> rimane sopra al

, per cui tutti gli effetti rimangono validi. E il mouse non ha effetto su quanto sta sotto (quindi sul

nel tuo caso).

L'unico problema potrebbe essere se devi avere un <a> diverso da quello dell'icona sulla scritta del

. Ad esempio

  <p class="scritta">
    ciao ciao
    <img ... />
  </p>

In pratica in tal caso devi formattare in modo diverso i due <a>: il .icona avra` float (e quindi di conseguenza e` di tipo blocco), mentre il .testo rimarra` inline, quindi limitato alla scritta.