Layout a 3 colonne ed Altezze in %

**TheX** · 01-02-2007, 12:24

Cercando di modificare il mio sito d'e-commerce su Zen-Cart mi sono accorto che le colonne di sinistra e destra NON hanno la stessa altezza della colonna centrale nonostante il valore 100%. Ho fatto quindi una prova basilare di questo tipo :

codice:

<html>
<head>
<title>Prova</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="sx">Colonna SX</div>
<div id="centro"> 
  <div> Centro</div>
</div>
<div id="dx">Colonna DX</div>
</body>
</html>

e il relativo foglio di stile :

codice:

#body, html {
color: #FFFFFF;
height: 100%;
margin: 0;
border: 0px solid #FFFFFF;
}

#sx {
float: left;
background-color: #000000;
height: 100%;
width: 100px;
margin:0 auto;
vertical-align: top;
padding: 0;
border: 0px solid #FFFFFF;
}
#centro {
float: left;
background-color: #00FFFF;
width: 760px;
height: 1200px;
margin: 0 auto;
vertical-align: top;
border: 10px solid #FFe000;
}
#dx {
float: left;
width: 100px;
background-color: #FF0000;
height: 100%;
margin-left: 0;
margin-right: 0;
margin:0 auto;
vertical-align: top;
padding: 0;
border: 0px solid #FFFFFF;
}

Io mi aspettavo che le colonne SX e DX avessero anch'essa l'altezza 1200 pixel in quanto è impostato height: 100% invece si fermano + o - all'altezza dello schermo...scrollando, infatti, non ci sono +

Dove ho sbagliato ?

GRAZIE

**Mich_** · 01-02-2007, 12:54

Il tuo browser sta interpretando bene.
Infatti le colonne laterali sono alte il 100% del loro contenitore (il body), mentre quella centrale e` alta 1200 px (secondo quanto specificato).

Se sei sicuro che la colonna centrale e` piu`alta dello schermo, puoi togliere height alla colonna centrale (avrebbe problemi in caso che i font vengano ingranditi - ad es. con il control +), ed inserire tutto (le tre colonne) dentro un contenitore, pure lui float.
Se vuoi essere piu` sicuro, puoi definire
min-height: 100%;
al body e al contenitore (poi potresti aver bisogno di un hack per IE6).

**TheX** · 01-02-2007, 13:01

Allora....intanto grazie per la risposta!

T spiego qual'è il mio problema...

Nel div centrale ho messo 1200px SOLO x fare in modo che finisse oltre lo schermo... Come detto ad inizio t3d in realtà le modifiche le devo fare su Zen-Cart quindi l'attuale div "centro" in realtà sarà il sito vero e proprio (che sicuramente sarà + alto dello schermo).

Quello che voglio riuscire a fare io è avere le colonne SX e DX alte tanto quanto il CENTRO...se il div centrale va oltre lo schermo vorrei ke anche le colonne ai lati aumentassero d conseguenza. Mi sono spiegato ?

Discussione: Layout a 3 colonne ed Altezze in %

Strumenti discussione

Ricerca discussione

Visualizza

[CSS] Layout a 3 colonne ed Altezze in %

Permessi di invio