il box contenitore non risponde in Netscape

[jetpower]

Ciao magari qualcuno di voi ha avuto un problema di questo tipo. Ho undiv contenitore che contiene 2 colonne: sinistra e destra richiamate con un semplice span

Ecco il semplice codice:

#container{
width: 700px;
margin: 0px auto;
border: 1px solid #808080;
background-color: #f9f9f9;
padding: 20px;
}

.colonnaSX{
float: left;
width: 300px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 15px;
border: 1px solid #ccc;
background: #fff;
}

.colonnaDX{
float: left;
width: 300px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 15px;
border: 1px solid #ccc;
background: #fff;
}


Giustamente in IE e Opera quando aumentano le colonne il container le segue e si allunga mantenendo il padding a 20px.
In Netscape invece mi ritrovo sempre le due colonne all'altezza del footer.

Ecco come richiamo nell'xhtml:

<div id="container">
<span class="colonnaSX">colonna sinistra</span>
<span class="colonnaDX">clonna destra</span>
</div>


se qualcuno ha qualche suggerimento, vacanze permettendo...

thanx

[jetpower]

azz... sembra funzioni tutto con un semplice overflow: auto;

dico bene ?

[Jerry Masslo]

concettualmente non mi pare corretto, lo span dovrebbe servire per differenziare la formattazione di porzioni di un elemento e rimanere inline, del resto non si capisce il motivo per cui lo usi, il problema di netscape e mozilla in genere è che dopo il float per ristabilire le cose devi usare un clear cioè prova con qualcosa del genere:

<div id="container">
<div class="colonnaSX">colonna sinistra








</div>
<div class="colonnaDX">clonna destra</div>
<br style="clear:both">
</div>

[jetpower]

Concettualmente non è corretto, ne convengo, tuttavia è piuttosto semplice da implementare come vedi. Ho trovato questo esempio di layout sul libro di Owen Briggs, Steven Champeon, Eric Costello e Matt Peterson.

[Jerry Masslo]

Originariamente inviato da jetpower
Concettualmente non è corretto, ne convengo, tuttavia è piuttosto semplice da implementare come vedi. Ho trovato questo esempio di layout sul libro di Owen Briggs, Steven Champeon, Eric Costello e Matt Peterson.

ne conoscessi uno mai letto un manuale cartaceo

il punto è che ma che ti hanno fatto i div o anche i p o gli h1, h2.. cioè i normali elementi block che servirebbero a te?


azz però sull'overflow hai ragione, sembra funzionare anche coi div, non so cosa significhi senza specificare un height però va

[jetpower]

ok grazie

[jetpower]

Ciao ho risolto credo brillantemente con un 3 colonne fisse e parallele in un box anch'esso fisso utilizzando elementi block. Per risolvere il problema con Netscape basta usare un overflow nel box contenitore:

#container{
padding: 8px;
margin: 0px auto;
border: 1px solid #999;
width: 760px;
text-align: left;
overflow: auto;
}

#SX{
float: left;
padding: 8px;
border: 1px solid #ccc;
width: 220px;
height: 300px;
}

#CE{
float: left;
padding: 8px;
margin-left: 5px;
border: 1px solid #ccc;
width: 220px;
height: 300px;
}

#DX{
float: left;
padding: 8px;
margin-left: 5px;
border: 1px solid #ccc;
width: 220px;
height: 300px;
}


E nell'xhtml:

<div id="container">
<div id="SX">testo box di sinistra</div>
<div id="CE">testo box centrale</div>
<div id="DX">testo di destra</div>
</div>



Che ne pensi ?

[Jerry Masslo]

ti si centrerà con gli ie solo con la 6 che con quel doctype è in standard mode per i precedenti ie devi aggiungere un

body {text-align:center}


per il resto se non temi l'allungamento delle pseudo colonne sembra funzionare, è un po' strano però se funzia, normalmente per risolvere coi mozilla si usa il clear

[jetpower]

Oppure per l'allineamento con tutti i browser basta usare un margin: 0px auto; nel box contenitore.

[Jerry Masslo]

Originariamente inviato da jetpower
Oppure per l'allineamento con tutti i browser basta usare un margin: 0px auto; nel box contenitore.

gli ie precedenti al 6 conoscono solo un quirk mode e a quel modo non centrano niente, vogliono un text-align:center nel body, so' fatti così