innanzi tutto ti suggerisco un cambio semantico nell'html ossia usare dei tag più appropriati, a meno che tu non hai altre esigenze:
html;
codice:
<div id="content">
[img]portone.jpg[/img]
<cite>
Un classico non ha mai finito di dire
quello che ha da dire.
Italo Calvino
</cite>
</div>
css:
codice:
#wrapper { width:100%; float:none; background-color: white; }
#content { margin: 0 220px 0 130px; padding: 15px;
background-color: #F4F4F4; overflow: visible; }
#content img { float: right; width: xxx; height: yyy; margin-left: 215px;}
#content cite { float: left; width: 200px; margin: 15px; }
non posso controllare ma ti invito a fare delle prove.
innanzi tutto considera che al posto di xxx e yyy devi menttere le dimensioni della tua immagine.
height: 100% funziona solo se il padre dell'elemento che dichiari height: 100% ha un altezza esplicita.
se usi float: none immagino che altre regole precedenti dichiaravano #wrapper e #content float, altrimenti è una dichiarazione superflua in quanto float non è ereditata come proprietà.
controlla l'effetto che ottieni con i float del blocco cite e dell'immagine
#content { overflow: visible; } è un trucco per gestire i contenitori che contengono elementi float. in questo modo il contenitore (#content), si estenderà per tutta l'altezza degli elementi contenuti, altrimenti dovresti inserire un'altro elemento che abbia come regola clear: both;
dall'errore che riscontri deduco che ci sono altre regole che influenzano gli elementi messi in campo, quindi non posso essere più preciso.
spero che queste indicazioni ti siano utili.
Rispondi quotando
