Salve a tutti,
ho il seguente problema:
In una pagina ho due div in linea, rispettivamente con float left e right, racchiusi in un altro div contenitore con lunghezza assegnata (ma non altezza che non è dichiarata perchè si deve adattare ai contenuti dei div contrapposti).
Il div con float:right è costituito da:
- un tag
(che ha una altezza line-height: 1.2em)
- una img (alta per es. 100px con padding top e bottom di 5px e 10px)
la sua altezza è quindi variabile al variare della visualizzazione del carattere.
Il div con float:left invece contiene:
-un <ul>[*] dove:
- <ul> ha list-style-type: none
-[*] float:left
che dovrebbero essere le dichiarazioni per ottenere un elenco in linea.ù
- l'"argomento" del[*] sono delle img di dimensione fissa (es. 15px)
Io vorrei fare in modo che le img del div float left fossero allineate in basso all'altezza della chiusura del div float right.
Spero di essere stato sufficientemente chiaro nell'esporre il mio prob. e spero che qualcuno sappia darmi un consiglio.
Allego comunque alcuni dati per facilitare il lavoro di tutti coloro che vorranno cimentarsi in tale impresa...
INTESTAZIONE PAGINA HTM:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
STRUTTURA HTM:
<body>
<div id="container">
<div id="header" class="fascia">
<div id="lingue">
<ul>[*][img]bandiera_italia_current.gif[/img] (altezza 15px)[*][img]bandiera_inglese.gif[/img] [/list]
</div>
<div id="patrocini">
Con il patrocinio di:</p>
[img]logo_comune.gif[/img] (altezza 100px)
</div>
</div>
<div id="vetrina" class="fascia"> (...seguito della pag...)
[img]top.jpg[/img]
</div>
</div>
</body>
CSS:
body {margin: 0px; padding: 0px; /* if IE */ text-align: center; font-size: 0.7em;}
ul {margin: 0px; padding: 0px; list-style-type: none;}
#container {width: 760px; margin: 0px auto; padding: 0px; /* if IE */ text-align: left;}
.fascia {width: 100%; margin: 0px; padding: 0px; clear: both;}
#lingue {margin: 0px; padding: 0px; float: left;}
#patrocini {margin: 0px; padding: 0px; float: right;}
#patrocini p {line-height: 1.5;}
#patrocini img {padding: 5px 0px 10px 0px;}
Grazie a tutti e allego anche una immagine per chiarire visivamente ciò che vorrei!!!
Rispondi quotando