problema align div

[pippo26]

ciao, sapete aiutarmi a capire cosa sbaglio... come mai su IE il div "MENU" è allineato correttamente a destra, mentre su FIREFOX è allineato a sinistra?


<div id="CONTENITORE" STYLE="text-align: right; z-index: 1; position: absolute; width: 464px;">
<div id=MENU" STYLE="text-align: left; width: 210px; background-color: #CCCCCC; padding-right: 5; padding-left: 5;">
CIAO
</div>
</div>

Grazie

[*pragma]

funziona bene FF.
per posizionare il secondo div (figlio di contenitore) devi usare
position:relative;
left:valore1px;
top:valore2px;

testa sempre anche con FF ed Opera.
con text-align si allinea il testo e non i box
ciao

[pippo26]

ciao, ho provato il tuo consiglio ma non mi funziona...:

<div id="CONTENITORE" STYLE="text-align: right; z-index: 1; position: absolute; width: 460px;">
<div id="MENU" STYLE="text-align: left; width: 210px; background-color: #CCCCCC; padding-right: 5; padding-left: 5; position: relative; top: 2px; left: 1px; ">
ciao
</div>
</div>

[*pragma]

Scusa, non ho capito cosa non segue. Prova questo codice

<style>
#contenitore {
text-align: right;
position: absolute; z-index: 1;
width: 460px;
border:solid blue 2px;
width:400px; height:220px;
}

#menu {
border:solid red 2px;
width: 210px;
background-color: #CCCCCC;
padding-right: 125px; padding-left: 5px;
position: relative;
top: 22px; left: 48px;
}

</style>


nel body:

<div id="CONTENITORE">contenitore esterno
<div id="MENU" >
ciao
</div>
</div>

[pippo26]

ho provato...risultato:

in IE
il box "menu" esce fuori dal box "contenitore" sul lato destro

su FF
il box è quasi centrato nel box "contenitore" ma la sua larghezza è sballata è più grande di 212 px...

Che mistero...
Io vorrei solo che il box "menu" si allineato in alto e a destra del box "contenitore"

Graz

[*pragma]

infatti era per farti vedere come si comportano diversamente ed anche per dirti come ti devi regolare nel modo correttto cioè con FF
ciao

[*pragma]

allora se metti

 #contenitore {
    text-align: right;
    position: absolute; z-index: 1;
    padding: 0;
    border:solid blue 2px;
    width:400px; height:220px;
  }

 #menu {
   border:solid red 2px;
   width: 200px;
   background-color: #CCCCCC;
   margin: 0;
   position: absolute;
   top: 0px; left: 198px;
  }

e nel body

<div id="CONTENITORE">contenitore esterno
<div id="MENU" >
ciao
</div>
</div>

ottieni l'effetto sia per IE che ff
la posizione 198px di menu è dovuta al calcolo complessivo del padding del contenitore, del margin e del bordo di menu oltre che dei due width.
ti è utile la guida nella parte che tratta i box model.
ciao