problema con layout css

[cayman]

Ciao, sto sperimentando un layout con i css a 3 colonne per una pagina web (è la prima volta) ecco il contenuto del file stile.css:

div#container { width = 760px; }
div#header { clear:both; }
div#navigation { float: left; width = 170px; }
div#content { margin: 0px, 170px; }
div#extra { float:right; width = 170px; }
div#footer { clear: both; }

Problema: il div "extra" viene mostrato a destra del "content" ma anzichè essere affiancato viene visualizzato sulla riga successiva???

[Mich_]

Anche il "content" deve avere
float:left;

Invece il margin 170 mi puzza di sbagliato.

[cayman]

Perfetto, ora i div sono andati al loro posto!

Se nel "content" vado a tolgliere: "margin: 0px, 170px;" il div "content" non risulta più centrato rispetto alla pagina (n.b. avevo impostato anche "text-align: center" nel "body")

[Mich_]

Per centrare un <div>:

Nei browser standard (Moz e famiglia):
margin:auto;

oppure

margin:0px,auto,0px,auto;

da inserire nel div che deve essere centrato


Nei browser IE:
text-align:center;

da inserire nel div che contiene quello da centrare

Le misure in px sarebbero da evitare (e` molto meglio un layout fluido).


Forse nel tuo caso devi includere i tre div dentro un ulteriore div contenitore, e poi centrare quest'ultimo.

[cayman]

Io utilizzo un browser IE; purtroppo impostando "text-align: center;" in nel "container" (è il div che contiene tutti gli altri) non cambia nulla;

Adesso provo a mettere "navigation", "container" ed "extra" dentro un ulteriore div!

Come faccio ad impostare che i 3 div (navigation, content ed extra) abbiano tutti altezza uguale al div con altezza maggiore???

[cayman]

Niente da fare ragazzi; Ora vi posto sia il codice htm che il codice css magari riuscite a darmi qualche consiglio...

CODICE HTM:
<div id="container">
<div id="header">header</div>
<div id="ciao">
<div id="navigation">navigation</div>
<div id="content">content</div>
<div id="extra">extra</div>
</div>
<div id="footer">footer</div>
</div>

CODICE CSS:
body { text-align: center; }
div#container { width: 760px; text-align: center; }
div#header { clear: both; }
div#ciao { text-align: center; }
div#navigation { float: left; width: 170px; }
div#content { float: left; }
div#extra { float:right; width: 170px; }
div#footer { clear: both; }

[Mich_]

Quello che hai fatto dovrebbe andare bene. Io pero` modificherei il CSS di ciao, togliendo il text-align e mettendo invece i margin:auto.

Per l'altezza puoi provare a mettere height:100% in tutti e tre: nei browser conformi dovrebbe funzionare. Comunque sulle tre colonne alte uguali, ci sono vari interventi in questo forum, e la cosa non ha trovato soluzione definitiva.

Ci sono alcuni esempi di layout a tre colonne in www.constile.org

CODICE CSS:

body { 
   text-align: center; 
}
div#container { 
   width: 760px;
   text-align: center; 
}
div#header { clear: both; }
div#ciao {
   margin: 0px,auto,0px,auto;
}
div#navigation { 
   float: left;
   width: 170px;
   height: 100%; 
}
div#content {
   float: left; 
   height: 100%; 
}
div#extra { 
   float:right;
   width: 170px; 
   height: 100%; 
}
div#footer { clear: both; }

[cayman]

Ho provato ad impostare il "file.css" come dici tu ma rimane tutto invariato - Sarà colpa di IE6?
Ho comunque trovato la soluzione sulla guida che mi hai consigliato; ecco l'indirizzo esatto per chi dovesse implementare un layout a tre colonne simile al mio: guida con stile

1000 grazie!

[rebelia]

Originariamente inviato da cayman
Come faccio ad impostare che i 3 div (navigation, content ed extra) abbiano tutti altezza uguale al div con altezza maggiore???

se il tuo e' come penso un problema grafico, un escamotage potrebbe essere - una volta creato un div che contenga le tre colonne centrali - mettergli una gif di bg che simuli le colonne e lasciare le tre colonne trasparenti; il div raggruppatore prendera' automaticamente la lunghezza del div piu' lungo e a video sembreranno tutti e tre uguali

[cayman]

Originariamente inviato da rebelia
se il tuo e' come penso un problema grafico, un escamotage potrebbe essere - una volta creato un div che contenga le tre colonne centrali - mettergli una gif di bg che simuli le colonne e lasciare le tre colonne trasparenti; il div raggruppatore prendera' automaticamente la lunghezza del div piu' lungo e a video sembreranno tutti e tre uguali

Grazie per il consiglio;
La soluzione che ho adottato è simile alla tua: ho colorato il div raggruppatore e quello centrale lasciando trasparenti i div laterali in modo da ottenere le 3 colonne di lunghezza uguale (almeno a livello visivo)