Il quesito non e` di facile soluzione.
Come hai capito, il float agisce su tutta la larghezza della finestra, e non e` limitato ad un determinato contenitore.
Occorre quindi trovare un escamotage per aggirare il problema.
Ripartiamo dal codice HTML, che mi par di intuire e` fatto in questo modo (pero` ho aggiunto e tolto alcuni oggetti che pososno essere utili per risistemare):
codice:
<body>
<div id="menu">
... menu ...
</div>
<div id="contenitore">
[img]immagine.jpg[/img]
Testo che viene stampato a destra dell'immagine</p>
</div>
<div class="cleaner">
questo è il testo che che viene stampato sotto l'immagine ed il suo testo scritto a destra.
il problema è che il testo inizia molto spazio sotto all'immagine. (immagine alta 200px)</p>
</div>
</body>
Anzitutto ho inserito ciascun testo dentro un
: infatti nella programmazione semantica i testi non possono sare sparsi nei <div>. Inoltre gli oggetti
possono avere uno stile proprio.
Poi ho tolto il <div> che conteneva solo l'immagine: non e` necessario.
Ora le possibilita` che vedo io per realizzare quello che vuoi sono due:
1. trasformi uno o tutti gli oggetti principali (menu, contenitore, cleaner) in oggetti posizionati
2. utilizzi sapientemente il clear sia left che right
La soluzione 1 presenta delle difficolta` e delle incertezze sul rendering cross-browser che lo rendono sconsigliabile.
Proseguo con la mia proposta della soluzione 2.
codice:
#menu {
float: left;
width: ...; /* necessario definirla, meglio in em, che forse e` piu` versatile */
}
#contenitore {
float: left;
...
}
#contenitore img {
width: ...;
height: ...;
}
#contenitore p {
float: right;
}
.cleaner {
clear: right;
}
... se poi c'e` un footer, avra` bisogno di un clear: both; ..
Rispondi quotando