Immagini flottanti in un div footer

[samiel]

Ho un footer di questo tipo:

Codice: Seleziona tutto

<div id="footer">
<p>© Associazione «bla bla» -
2011</p>
<img class=\"piclogs\" src=\"pics/loghi/valid-css2-blue.png\" alt=\"Logo
CSS2\" title=\"Logo CSS2\" />
<img class=\"piclogs\" src=\"pics/loghi/valid-xhtml11-blue.png\" alt=\"Logo
XHTML 1.1\" title=\"Logo XHTML 1.1\" />
</div>


e il relativo CSS

Codice: Seleziona tutto

#footer{clear:both; text-align:center; padding:25px; background-color:white;
color:#1E247C; border-top:double #1E247C}
.piclogs{float:right; text-align:right; padding:25px 25px 0 0}


Ora, le icone sforano il footer e finiscono nel body,
che peraltro è di un diverso colore. Per farle stare dentro
il footer ho aggiunto dopo le icone un <p></p> vuoto con clear:right,
ma mi pare una soluzione sporca. L'alternativa che funziona
è usare il posizionamento assoluto, ma volevo capire se invece
si può risolvere lasciando le icone flottanti...

Grazie
M.

[roberto67]

proverei a togliere il

Codice: Seleziona tutto

float:right

all'immagine e di usare un html come

Codice: Seleziona tutto

<p class="piclogs"><img src=\"pics/loghi/valid-css2-blue.png\" alt=\"Logo
CSS2\" title=\"Logo CSS2\" />
<img src=\"pics/loghi/valid-xhtml11-blue.png\" alt=\"Logo
XHTML 1.1\" title=\"Logo XHTML 1.1\" /></p>

e nel css

Codice: Seleziona tutto

p.piclogs {text-align:right}

[teox99]

nel div devi dichiarare
overflow:auto

[samiel]

Funzionano entrambe.
La prima mi pare un po' più "manuale", come quella che avevo abborracciato io.
La seconda mi sembre più raffinata. Però - visto che con l'overflow (al quale
in effetti non avevo pensato affatto) le immagini non sono collocate
all'interno di un <p>, non dovrebbe funzionare anche il vertical-align?
Invece, dato che le immagini sono di dimensioni leggermente diverse,
che io metta vertical-align a top o a bottom non si sposta nulla...

Grazie
M.

[aschenaz]

Per il vertical-align fai così:

Codice: Seleziona tutto

div#footer img{vertical-align:bottom-text}


[samiel]

Grazie, visto solo ora!

M.

PS
La sintassi corretta è text-bottom