La difficile convivenza tra immagini ed elenchi puntati

[horace]

Come dal titolo della discussione, ho un problema di visualizzazione tra un immagine ed un elenco puntato.
L'immagine è inserita in un div così impostato:

float: left;
display: inline;
padding-right: 5px;
padding-left: 5px;

che si "adagia" a sinistra di un paragrafo.
L'immagine può essere di dimensioni differenti a seconda dei dati che la pagina (asp) deve caricare.

Terminato il paragrafo, inizia un elenco puntato, senza nessuna caratteristica particolare impostata (eredita il carattere dal div che contiene la pagina).

Ebbene, se il paragrafo è breve e l'immagine più "alta" del testo, l'elenco puntato va a sovrapporsi all'immagine.

Come posso fare per evitare questo problema?

[thomas_anderson]

ciao!
dai al div contenitore la seguente serie di dichiarazioni:

1)

div:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

Questo per i browser standard. IE dovrebbe automaticamente contenere il float. se così non fosse, aggiungi per Explorer la dichiarazione 'height: 1%'.

ps. se usi il padding sinistro sul float e non il margine sin., la dichiarazione 'display: inline' non serve, in quanto il bug di IE non si presenta.

[horace]

Originariamente inviato da thomas_anderson
ciao!
dai al div contenitore la seguente serie di dichiarazioni:

1)

div:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

Questo per i browser standard. IE dovrebbe automaticamente contenere il float. se così non fosse, aggiungi per Explorer la dichiarazione 'height: 1%'.

ps. se usi il padding sinistro sul float e non il margine sin., la dichiarazione 'display: inline' non serve, in quanto il bug di IE non si presenta.

Scusami, ma non cambia nulla, sia in FF che in IE. Non capisco dove sbaglio.
Le dichiarazioni che mi hai scritto io le ho applicate al div contente l'immagine, le dovevo dare ad un altro div?
Linko una pagina che da questo problema, per far capire meglio:
http://www.provincia.fe.it/agenda21/...ica.asp?id=199

Grazie per l'interessamento

[Squall1988]

Ritiro fuori questo post, perché ho lo stesso problema.

Io ho

<img style = "float: left">

e poi il testo dopo, che si affianca bene, a parte il

<ul>

che mette i punti sopra l'immagine...

[Raccoon29]

Ciao,

dal momento che non so i vostri casi particolari e le vostre esigenze, allora vi illustro le prime soluzioni che mi sono venute a mente, poi vi adatterete di conseguenza.

Parto col spiegare perché il margin-left sul "ul" non funziona:
se teniamo conto che l'immagine è di 100px larga e noi diamo un "margin-left:20px" alla "ul", dal momento che un elemento float c'è ma non c'è, datoché non è proprio "fisico", allora non viene considerato come riferimento per il margine, ma bensì verrà considerato come riferimento il border del div padre, perciò:

     img
<------------>
margin     
<-->        * |<-inizio lista

Se invece noi diamo alla lista "margin-left: 100px;"

     img
<------------>
   margin     
<------------> * |<-inizio lista

Detto questo, l'uovo di colombo sarebbe dare un margine destro all'immagine flottante:

img{
   margin-right: 20px;
}

ma ciò comporta che anche il paragrafo venga distanziato.

La seconda soluzione sarebbe quella di racchiudere paragrafo e lista in un div con "float: left;"
mentre l'immagine ha "display: block; float: left;" solo che in questo modo le scritte non scivolano più sotto l'immagine quando è finita... vedete voi. (la seconda soluzione non l'ho testata, causa tempo!)

PS: spero di aver capito bene il problema

hth
ciauz