Float interpretato diversamente da ff e explorer 6

[ciro78]

Come da titolo. Sto realizzando un layout che richiede due colonne qund uso float.I risulatti sono diversi però:

Nell'immagine ho che il primo esempio è di ff mentre il secondo di explorer.


Il codice è nella pagina

<div class="principale">
<div class="1"></div>
<div class="2"></div>
</div>

il css

.2 {
position:relative;
margin: 10px 0px 10px 0px;
height:auto;
top:0px;
left:15px;
margin-left:205px;
width:510px;
border:1px;
border-style:solid;
padding:0px 0px 0px 0px;
}

.1{
float:left;
background-image:url(../img/foto.jpg);
position:relative;
top:0px;
left:10px;
width:200px;
height:150px;
border:1px;
border-style:solid;
border-color:#000000;
margin: 10px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

[deleted_id_48586]

Dall'immagine che hai postato non si capisce un granchè sarebbe meglio uno screenshot più grande.

Inoltre fai attenzione a 2 cose.

1. Non assegnare nomi di ID o nomi di CLASSI con un numero iniziale come hai fatto (.1 e .2)
Mettici piuttosto un carattere di sottolineatura. (_.1 e _.2), questo onde evitare problemi di parsing.


2. Per gli elementi vuoti metti sempre almeno un "" in quanto su alcuni browser la mancanza di contenuto in un elemento inficia la visualizzazione dello stesso seconda la logica:

Niente contenuto -> niente da visualizzare.

Ciao.

[ciro78]

l'immagine è chiarissima in pratica il div 2 è spostato verso destra...guarda bene

i nomi li ho messi così sul forum

e lo spazzio è messo
se ho capito bene a quello che ti riferisci

[deleted_id_48586]

Oddio io continuo a non capire bene l'immagine ma probabilmente sono stordito io.

Cmq se vuoi affiancare due DIV con il floating ti conviene farlo per entrambi:

es:

.1 {
float:left;
width:200px;
border:1px solid red;
...
margin-right:10px;
}


.2 {
float:left;
width:300px;
border:1px solid blue;
...
}

se vuoi poi distanziare i due DIV metti un margine a destra al primo DIV e non un margine a sinistra al secondo DIV in quanto IE6 ha un bug che raddoppia il margine di sinistra se il floating è impostato a sinistra.

Ciao.

[ciro78]

funziona ma non mi ci ritorvo col float
mannaggia

[deleted_id_48586]

In che senso "non ti ci ritrovi col float"?

[ciro78]

allora io so questo
gli elemnti div sono elementi che creano nel flusso un blocco
ora se scrivo due div di seguito questi si posizionano uno sotto l'altro

per posizionarli affiancati metto a quelle che precede float left

ma se lo metto anche al secondo non capisco rispetto a chi c'è il left?

[deleted_id_48586]

In realtà mettere un FLOAT:LEFT anche al secondo elemento serve per evitare problemi di visualizzazione non uniforme sui vari browser (parlo per esperienza).

Se tu hai un DIV contenitore di mettiamo 800px e in esso metti due DIV flottanti di, rispettivamente, 200 e 600 pixel vedrai che avrai un bel due colonne fisse e stabili.

Ciao.