problema di compatibilità con il float nei vari browser

**trust** · 07-08-2006, 10:59

Ciao ragazzi,
ho un piccolo problema con il float. Adesso vi propongo un piccolo esempio per farvi capire
meglio:

codice:

<html>
<head>
<style type="text/css">
#primo{width:768px;height:40px; background-color:#fff000;}
#secondobase{width:768px;height:auto}
#secondo1{width:50%;height:auto; float:left;background-color:#ff00ff;}
#secondo2{width:50%;height:auto; float:left; background-color:#00ff00;}
#terzofine{width:768px;height:40px; background-color:#cccccc;}
</style>
</head>

<body>
<div id="primo">Titolo...</div>
<div id="secondobase">

  <div id="secondo1">1° Quadrante

4°riga</div>
  <div id="secondo2">2° Quadrante</div>

</div>

<div id="terzofine">piede...</div>
</body>
</html>

In pratica con "explorer e opera" tutto funziona alla perfezione, ma se lo stesso codice
lo provo con "firefox e netscape" il div "#secondobase" non aumenta proporzionalmente (in altezza)
ai div "#secondo1" e/o "#secondo2", e quindi a sua volta condiziona il div "#terzofine"
che va sotto ai div "#secondo1 e/o #secondobase".

Come posso risolvere il succitato problema? :master:

Grazie mille

**Mich_** · 07-08-2006, 11:10

Vedi se e` lo stesso problema.
http://forum.html.it/forum/showthrea...readid=1016146

**dwj** · 07-08-2006, 11:13

Mi sembra un problema di clearing.
potresti inserire dopo <div id="secondo2">
un div vuoto con clear:both:

html

codice:

<div id="clear"></div>

CSS

codice:

#clear{clear:both}

E se proprio nn vuoi lasciarlo vuoto potresti metterlo così:

html

codice:

<div id="clear"><hr /></div>

CSS

codice:

#clear{clear:both;}
#clear hr {display:none;}

Così a livello semantico ti inserisce una riga orizzontale prima del footer, ma che tu nascondi con i css.

Cmq ci sono molti altri consigli utili sul caso: prova a fare una ricerca clear o clearing

ciao ciao

**trust** · 07-08-2006, 11:17

Vedi se e` lo stesso problema.

Sembra di si :master:

Però se floatto tutto il blocco "#secondobase" devo floattare di conseguenza anche il div "#terzofine", perchè altrimenti il div "#terzofine" va sotto al div "#primo".

Non esiste un modo per non floattare anche i successivi al blocco floattato? :master:

Grazie mille

**trust** · 07-08-2006, 11:35

Ciao

Grazie mille dwj, ho applicato la seconda opzione con "hr" e adesso tutto funziona alla perfezione.

Cmq ringrazio tutti per l'interessamento

Discussione: problema di compatibilità con il float nei vari browser

Strumenti discussione

Ricerca discussione

Visualizza

problema di compatibilità con il float nei vari browser

Permessi di invio