Allineare 4 testi ai 4 angoli di un DIV

[Gemini4Ever]

Ho un problema, derivante dal fatto che da poco mi sto affacciando al mondo dei CSS avanzati.

Vorrei caricare all'interno di un DIV quattro testi, allineati ai rispettivi angoli interni; il DIV sarà d'altezza variabile.

ho provato in diversi modi, con float:right e float:left per allineare i testi agli angoli sx e dx, ma non riesco a far valere l'istruzione "vertical-align:bottom" sia in FF che in IE


cosa si deve usare?

[Mich_]

Vertical-align serve per allineare all'interno di una tabella, quindi non e` corretta.

I testi chiaramente saranno dei

, che vanno allineati mediante float (per poterli mettere sulla stessa linea in orizzontale), e mediante opportuni margini (da posizionare a 0 dove deve toccare l'angolo e a auto dove deve lasciare lo spazio).
Non so se questo funziona in IE6, ma dovrebbe andar bene negli altri browser e anche in IE6, se usi la DTD XHTML Strict.

L'eventuale testo interno ai

(se ci sono piu` righe), va allineato mediante il text-align.

[Gemini4Ever]

ok, grazie delle dritte ...

i testi sono chiaramente all'interno di

il problema è (magari dovevo dirlo prima) tra le 4 parole agli angoli, internamente c'è un'altro testo, quindi non posso usare il padding (avevo già fatto un test) perchè il testo è varibiale, da 0 a 3 righe e quindi i testi inferiori si spostano in alto e in basso




in allegato ho inserito un'immagine "esplicativa" .. spero

[Mich_]

Io proverei una cosa di questo tipo (non so se ti puo` andare):

<div id="cosaparticolare">
  <p id="as" class="angolo">alto sinistro</p>
  <p id="ad" class="angolo">alto destro</p>
  

tutto il testo che vuoi, che puo` essere anche lungo, molto lungo</p>
  <p id="bs" class="angolo">basso sinistro</p>
  <p id="bd" class="angolo">basso destro</p>
</div>

CSS:
#cosaparticolare {
  background: #ccc;
  width: ...;
}
#cosaparticolare p {
  clear: both;
  /* formattazione per il testo normale interno */
}

p.angolo {
  font: ...; 
  /* fomatt. per il testo negli angoli */
  background: #999; /* solo per le prove - poi e` da togliere */
}
#as {
  float: left;
  margin: 0 auto auto 0;
}
#ad {
  float: right;
  margin: 0 0 auto auto;
}
#bs {
  float: left;
  margin: auto auto 0 0;
}
#bd {
  float: right;
  margin: auto 0 0 auto;
}

[Gemini4Ever]

allora ... in IE6 è perfetto, in FF "as" e "ad" sono si agli opposti, ma su due righe diverse, mentre "bs" e "bd", oltre ad essere su due righe diverse, sono anche fuori dal DIV ...

ora faccio qualche test in modo da avere la stessa visualizzazione sia su IE6, FF e Safari.

per il momento ti ringrazio, almeno ho una buona strada da cui "partire" ...

[Mich_]

E` il problema del float in FF.
Dovresti dare il float anche al <div> e al

interno.
Pero` il

interno deve avere allora width: 100%, mentre non so come si comportino gli altri blocchi (esterni) se dai il float al <div>.