Proprietà Float: left

[elisamito]

Ciao ragazzi,
buon inizio di settimana a tutti!
Vi chiedo una dritta riguardo la proprietà float:left.

Sto creando una pagina dove c'è :

DIV che contiene tutta la struttura del sito a cui ho dato delle proprietà classiche come width, margin, padding
<DIV CLASS="CONTENTITORE">

<div class="HEADER">
Contiene il pezzo in alto banner animato, anche qui proprietà classiche
</div>


qui arriva il pezzo in cui non mi riesce quello che voglio ottenere

ho un
<div class="Master">
a cui ho assegnato proprietà classiche come width, padding, margin,
e poi

<div class="MasterSx">
Le proprietà di questo div ho inserito un float: left; poichè vorrei fosse allineato a sx
</div>

<div class="MasterDx"
le proprietà di questo div se non inserisco il float: left; non si allinea alla destra del mastersx
ma se inserisco il float: left; il div CONTENITORE sballa e non mi crea il riquadro che mi contiene tutta la struttura, anche il div Master sballa se non inserisco un float:left pero' è sbagliato...

</div>

come posso fare per risolvere il problema?
Forse manca qualche proprietà abbinata con il float: left che regola tutto?
Ho provato con un clear: Both anche nel div Master e nel Contenitore ma niente.
Grazie mille!

</div>

</DIV>

[M0707]

per il contenitore hai usato:

position: relative;
text-align: left;

?

[M0707]

se ci posti il tuo css magari ti possiamo aiutare meglio

[elisamito]

ciao amici,
grazie per le risposte,
provo ad aggiungere la proprietà
position: relative;
al contenitore, se non cambia niente posto il codice del css!
A fra poco!!

[elisamito]

ciao amici,
ho provato ad aggiungere il position ma niente da fare...
vi posto la struttura...

 
<div class="sito">

<div  class="header">

.....

</div>

<div class="Contenuti">

<div id="MasterSx">

.....
</div>  
    
<div id="MasterDx">

</div>

</div>

</div>

riporto le proprietà che ho ho scritto per ogni div nel css

div.sito
{
    margin: 0 auto;
    padding: 0px;
    text-align: center;    
    width: 660px;    
    clear: both;
}

div.Contenuti 
{

    width: 648px;
    margin:0 auto;
    padding-bottom: 20px;
    color: #000000;
    font-size: small;
    background-image: url(../img/bordo-center.png);
    background-repeat: repeat-y;
    background-position: top;
    text-align: center;
    border:1px solid red;
    float: left; //non vorrei inserirlo ma sballa se non lo contemplo nelle class

}

#MasterSx 
{
    width: 160px;
    padding: 0px;
    margin-left:30px;
    text-align: center;   
    float: left; //qui invece ci vuole, ma quando lo inserisco sballano i div precedenti...

}

#MasterDx 
{
    width: 430px;
    padding: 3px;
    text-align: left;
    background-color:#A4A88E;
    
}

grazie amici per il vostro aiuto!!

[M0707]

Intanto invece di usare div.sito nel corpo dell'html usa #sito.
Nel css inserisci anche body, per non lasciare spazio ai lati nella visualizzazione del browser

body {
	margin: 0px;
	padding: 0px;
	background-color: #FFF; /*scegli il colore che preferisci */
}

Il background-color è importante, perchè se nn lo imposti, ognuno in IE (ad esempio) potrebbe scegliere di default di vedere lo sfondo di tutti i siti visitati in verde, mentre se imposti il colore che decidi tu per il tuo sito, blocchi la visualizzazione di default.

Per il resto ho modificato così il tuo css

body {
	margin: 0px;
	padding: 0px;
	background-color: #FFF; /*scegli il colore che preferisci */
}

/*contenitore*/
#sito {
	position: relative;
	width: 660px;
    margin: 0 auto;
    padding: 0px;
    text-align: center;
	z-index: 0; /*importante per la sovrapposizione dei livelli */
}
#Contenuti {
	position: relative;
    width: 648px;
    padding-bottom: 20px;
    color: #000000;
    font-size: small;
    background-image: url(../img/bordo-center.png);
    background-repeat: repeat-y;
    background-position: top;
    text-align: center;
    border: 1px solid red;
	z-index: 0;
}
#MasterSx {
	position: relative;
    width: 160px;
    padding: 0px;
    margin-left:30px;
    text-align: center;
	float: left;
	z-index: 0;
}
#MasterDx {
position: relative;
    width: 430px;
    padding: 3px;
    text-align: left;
    background-color:#A4A88E;
	z-index: 0;
}

[M0707]

L'ho provato... e pare che funzioni
Mi raccomando: usa la "position"... ti risolve i problemi di visualizzazione in tutti i browsers

[elisamito]

grazie mille amico!
in giornata lo provo e ti faccio sapere!!
Cmq il body l'ho utilizzato! Ho postato solo l'essenziale..!

[elisamito]

carissimo amico,
ho provato la tua soluzione ma purtroppo persiste il problema che il div di sinistra non sta dentro al div contenuti è sempre il float: left che dà dei problemi, perchè se lo tolgo tutto va bene e si incastra però il div di destra scorre sotto,

invece con la soluzione di adesso il div di destra sta sopra a quello di sx...non capisco come posso risolvere..

se inserisco float: left sia del div di sx che in quello di dx mi tocca metterlo anche nel div contenitore e così non è corretto...

[elisamito]

non capisco...

anche una situazione semplice come questa:

<div class="contenitore">

<p class="left">TESTO LEFT</p>
<p class="right">TESTO RIGHT</p>

</div>

ecco a left e right metto la prorietà float left e float right,
ma poi il riquadro contenitore non si forma...
uff!