Height e Float

[PierinoPipetta]

Questo è il mio problema, credo sia di facile soluzione, ma non riesco a trovarla

<div style:"border=1 solid 00000; width:300px; float right; height:auto">
<p style:"float: left; width: 60px">IMMAGINE 50*50</p>
<p style:"float: right; width: 230px">TESTO DA INSERIRE con lunghezza totale minore di 50px in altezza</p>
</div>

Ora in questo modo il bordo su IE va dopo l'immagine, mentre su FF giustamente non si allunga in quanto manca un clear: both.

Quindi:
- posso pensare di mettere un <p style:"clear: both; margin:0; padding:0"></p> prima della chiusura del div, ma non mi piace molto anche perchè mi pare crei delle differenze o comunque una spaziatura dal bordo inferiore.
- Posso mettere un height al div fisso, ma non va bene perchè in caso di ridimensionamento del carattere voglio che la bordatura segua il testo.

Posso tranquillamente togliere i float nei P ma ne ho provate diverse e non me ne viene una come dico io (vedi immagine). Che mi consigliate?

Ciao

[Mich_]

Anzitutto ci sono errori di sintassi nel CSS: ti manca il # prima del codice colore e devi usare i duepunti al posto dell'uguale.

Poi non so perche` stai a complicare le cose:

<div> 
  


    [img]IMMAGINE[/img]
    TESTO DA INSERIRE con lunghezza totale minore di 50px in altezza
  </p>
</div>

CSS:
div {
  border: 1px solid #000;
  width: 300px; 
  float right; 
  height:auto;
}
div p {
  width: 230px;
  float: ???;      /* non so a che serva, ma non conosco il resto della pagina */
}
div img {
  float: left;
}

[PierinoPipetta]

Il codice l'avevo scritto a memoria quindi ho sbagliato qualcosetta...

In realtà nel CSS non ho inserito il float right e non posso inserirlo perchè mi sballa la pagina fra Explorer e FF quindi ammettendo di usare questo css.

div {
border: 1px solid #000;
width: 300px;
height:auto;
}
div p {
width: 230px;
}
div img {
float: left;
}

Queste sono le due uscite:

[Mich_]

Ho capito.

E` un piccolo bug di FF (ma anche di molti altri browser): un blocco float non sta dentro il suo contenitore se questo non e` float.

Si puo` ovviare dando il float anche al contenitore (che puo` avere effetti collaterali importanti), oppure "chiudendo" il float con un blocco contenente il clear.
Esempio:

<div> 
  


    [img]IMMAGINE[/img]
    TESTO DA INSERIRE con lunghezza totale minore di 50px in altezza
  </p>
  <p class="clearer"> </p>
</div>


CSS:
div {
  border: 1px solid #000;
  width: 300px;
  height:auto;
}
  div p {
  width: 230px;
}
div img {
  float: left;
}
p.clearer {
  clear: both;
  font-size: 0;    /* questo serve per evitare unbug inIE6 */
}

Non e` una soluzione elegantissima, perche` "sporca" il codice HTML con un elemento che serve solo per formattare, ma funziona.

[PierinoPipetta]

purtroppo immaginavo... era più o meno quello che avevo ipotizzato, solo che con un clearer ottenevo su IE una riga vuota. Probabilmente il size 0 come dici tu mi serve proprio per quello.

Brutto ma efficacie insomma.

GRAZIE MILLE