problema con clear in colonna

**hamster_70** · 25-08-2008, 10:31

dove sbaglio ? su IE 7 si vede correttamente, su FF 3 no

IE 7

FF 3

questo il codice (ridotto all'osso)

codice:

<html>
<head>
<style type="text/css">
<!--
#layout {
	width: 800px;
}
#colonna1 {
	margin: 0px;
	padding: 0px;
	float: left;
	width: 500px;
}
#colonna2 {
	padding: 0px;
	width: 240px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 560px;
}
h2 {
	clear: both;
}
-->
</style>
</head>
<body>
<div id="layout">
  <h1>bla bla bla</h1>
  <div id="colonna1"> n sjnfd  n sj..... dpmdpmpgmp </div>
  <div id="colonna2">
    

 n sjnfd...... dpmdpmpgmp </p>
    <h2>bla bla bla</h2>
    

 n s......mpgmp </p>
  </div>
</div>
</body>
</html>

Come mai in firefox il clear di h2 della colonan2 ha effetto sulla colonna 1 ?

Vorrei chiaramente che anche in FF si vedesse come in IE 7, dove sbaglio ?

**Raccoon29** · 25-08-2008, 16:41

Ciao,

partiamo col dire che se IE fa una cosa e FF un'altra, quello che sta sbagliando è sempre e comunque IE.
Detto questo passiamo alla risoluzione del problema.
Prima vorrei far presente che quei "" all'interno del tag style, non hanno senso, nel senso che non ce l'hanno proprio

: quando il browser legge <style>, dimentica totalmente l'HTML e comincia a parlare in CSS, perciò i tag di commento HTML non sa più cosa vogliono dire, quindi il CSS viene letto ugualmente solo che il browser intanto si domanda perché l'utente abbia messo quegli strani simboli all'inizio e alla fine...
Quindi se devi commentare nello <style> ti consiglio vivamente di usare i /* */

Per quanto riguarda il problema invece, per risolverlo fai queste modifiche nel CSS (verde=aggiungi, rosso=elimina, nero=lascia come sta):

codice:

   <style type="text/css">   
      #layout {
        width: 800px; /*altrimenti in IE andrà a capo perché non c'è abbastanza spazio orizzontale */
        width: 100%;
      }
      #colonna1 {
        margin: 0px;
        padding: 0px;
        float: left;
        width: 500px;
      }
      #colonna2 {
        padding: 0px;
        width: 240px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 560px;
      }
      h2 {
        clear: both;
      }
    </style>

Questo perché se con "clear: both;" annulli i float, il "div colonna1" ricomincerà ad essere "block", quindi manderà a capo.
In definitiva "clear" agisce sui float, non ha importanza di chi, se sei un float nel verso del clear, devi morire!

EDIT: inoltre questo dimostra che per l'ennesima volta FF seguiva ciecamente gli ordini, mentre IE ha inventato il layout come più gli aggrada

hth
ciauz

**hamster_70** · 25-08-2008, 16:59

ok, il mio problema è che quell' H2 il clear lo deve avere (subito prima ci sono dei float all'interno della colonna2, e senza clear l'H2 va dove gli pare), anche l'800px è necessario, non voglio un layout fluido ma fisso

quindi la domanda è, posto che quell'H2 deve avere un clear... come faccio a fare un layout come quello della prima immagine ?

**Raccoon29** · 25-08-2008, 17:10

Fermo restando che il clear ti manderà sempre a capo dal momento che poggia su di un elemento floattante, quello che potresti fare è o dare agli elementi che ha sopra (l'h2) un float destro, così che tu possa fare "clear: right;" invece che totale con "both" in modo da annullare solo il float superiore all'h2, oppure eviti il clear e giochi di larghezze: dato che sai che il layout è largo 800px, e lo spazio a disposizione della colonna di destra è di 240px, ed inoltre magari l'elemento flottante da eliminare è 150px largo, allora se fai l'h2 con larghezza 200px (oppure 240px, od anche 100%) egli dovrebbe andare a capo e fare quindi da starter per le scritte successive.
Per ora ciò che mi è venuto in mente è questo, altrimenti se ci dai un caso costruito su cui fare delle prove, potremmo darti soluzioni dettagliate.

hth
ciauz

Discussione: problema con clear in colonna

Strumenti discussione

Ricerca discussione

Visualizza

problema con clear in colonna

Fa così perché gliel'hai detto tu :)

Il clear quello fa

Permessi di invio