Div contenitore e due img float

[a.desantis]

Ciao ragazzi, ho un <div> contenitore centrato nella pagina, di dimensioni stabilite, e due immagini a cui ho assegnato il float left e right.
Vorrei che l'immagine con il float: right si posizionasse nell'angolo inferiore a destra, come accade per quella con il float: left che si posiziona nell'angolo in alto a sinistra.
E' possibile cio'?
Tra le due immagini c'e' un paragrafo di testo.
Devo arrangiarmi con la lunghezza del paragrafo per fare in modo che l'immagine con il float: right si posizioni dove voglio io?
Grazie
Antonio

[mahamatt]

per quanto ne so, puoi provvedere con il position:absolute, ma il div contenitore dovrebbe a sua volta essere posizionato (centrato) in modo assoluto...

[Mich_]

Un'immagine e` un oggetto di tipo inline, che puo` quindi essere posizionata anche all'interno del tag

. In particolare puoi inserirla nel punto che piu` ti interessa.

Inizia con l'inserire:


<img id="uno" ...> ... il tuo testo ... <img id="due" ...></p>

Poi dovrai assegnare
float:left;
alla immagine #uno, e
float:right;
alla immagine #due

Se non va bene, puoi posizionare la #due nel punto che desideri.

[a.desantis]

Originariamente inviato da Mich_
Un'immagine e` un oggetto di tipo inline, che puo` quindi essere posizionata anche all'interno del tag

. In particolare puoi inserirla nel punto che piu` ti interessa.

Inizia con l'inserire:


<img id="uno" ...> ... il tuo testo ... <img id="due" ...></p>

Poi dovrai assegnare
float:left;
alla immagine #uno, e
float:right;
alla immagine #due

Se non va bene, puoi posizionare la #due nel punto che desideri.

Grazie Mich_
pero' in questo modo in ogni caso per posizionare la <img id="due"> devo giostrarmi con i margini di <img> ad esempio, o no?
Non accadra' che si ancori all'angolo in basso a destra come fa la prima immagine in alto a sinistra.
Sbaglio?
Ciao
Antonio

[Mich_]

I margini li puoi usare per spaziare l'immagine dai bordi e/o dal testo, ma questo e` un discorso diverso.

Se inserisci un'immagine dentro un

e la metti dopo la fine del testo con float:right, questa si posiziona per forza nell'angolo in basso a destra (sempre che non hai settato dimensioni per il

stesso).

Per verificare, prova a vedere cosa succede assegnando un colore di sfondo al

, in modo da "marcare" lo spazio occupato dal blocco.

[a.desantis]

Si, e' vero, si posiziona in basso a destra dopo la fine del testo, ma il mio problema e' che vorrei posizionarla in basso a destra del div che contiene testo e immagini...
Antonio

[Mich_]

Allora inizia a postare qualcosa di piu` del tuo problema.
Ad esempio il codice HTML+CSS.

Anche uno schemino (fatto con un programma grafico qualsiasi) da allegare al post potrebbe essere utile: almeno parliamo di un problema concreto e ci capiamo meglio.

[a.desantis]

Allora, cio' che vorrei ottenere e' questo: ho un div con le dimensioni specificate e centrato nella pagina.
Vorrei inserirci due immagini come in figura, in alto a sinistra e in basso a destra, con un paragrafo

in mezzo.
Grazie per l'attenzione
Antonio



Il codice css e' questo:
-------------------------------------------------------------------------------
#aboutbox {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #999999;
text-decoration: none;
height: 400px;
width: 600px;
border: 1px solid #FF0000;
margin-right: auto;
margin-left: auto;
margin-top: 100px;
margin-bottom: 50px;
}
img.aboutsx {
float: left;

}
img.aboutdx {
float: right;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #CCCCCC;
text-decoration: none;
text-align: justify;
}
-----------------------------------------------------------------------------------

Il codice HTML questo:
-----------------------------------------------------------------------------
<div id="aboutbox">

[img]thumbintro/acqua5.jpg[/img]Nato nel settembre 1974, a pochi km da Roma, sin dall'infanzia ho mostrato
un particolare interesse verso la Natura in genere, con una particolare
predilezione per il mondo animale...segue......[img]thumbintro/acqua5.jpg[/img]</p>
</div>
----------------------------------------------------------------------------

[Mich_]

Dall'immagine non riesco a capire se i blocchi neri devono "sbordare" dai limiti del testo, o se devono essere allineati con i suoi bordi.
Inoltre nell'immagine manca il bordo (che e` segnato nel CSS del <div>), e i due blocchi sono di dimensioni diverse, mentre nel CSS vengono realizzati tramite la stessa immagine, e senza definizioni di dimensioni.

Comunque quel codice dovrebbe funzionare (per lo meno in FF e brwoser standard).

[a.desantis]

Il testo deve partire come parte ora, dall'immagine con float: left e finire quando incontra l'immagine con float: right.
Il problema e' che con l'immagine con float: right non c'e' verso di farla posizionare come in figura, ma varia la sua posizione al variare della lunghezza del testo,posizionandosi alla fine di esso.
Tutto cio' in IE6/7 e FF2
Antonio