problema impaginazione con css

[Delas]

ciao. allora, ho fatto un layout a tre colonne ed una riga sottostante. più o meno così:

+-----+----------+-----+
| .sx | .centro  | .dx |
|     |          |     |
|     |          |     |
|     |          |     |
|     |          |     |
|     |          |     |
+-----+----------+-----+
| .bottom              |
+----------------------+

vi ho scritto, sui relativi div, le classi di appartenenza. questo invece è il css per quei campi:

.centro {
	margin-left: 20%;
	margin-right: 20%;
	padding: 0px;
}

.sx, .dx {
	position: absolute;
	top: 0;
	width: 20%;
	margin: 0px;
}

qual'è il problema?
sulle colonnine di destra e sinistra, ho dei contenuti standard che non variano fra le pagine. il box centrale ha invece contenuti variabili (dinamici, con dati da db con asp). se ho un testo più corto su .centro che .sx o .dx ho questo bruttissimo effetto:

+-----+----------+-----+
| .sx | .centro  | .dx |
|     |          |     |
+     |----------|     +
|     | .bottom  |     |
+     |----------|     +
|     |          |     |
|     |          |     |
|     |          |     |
|     |          |     |
+-----+          +-----+

in pratica, il div .bottom sale e va sotto alle colonnine, come posso fare in modo di evitare questo inconveniente?
ah, ho visto che con un alto padding inferiore su .centro si risolve, ma se ho una pagina con tanti contenuti, ho una fascia inferiore davvero molto brutta.

[Mutato]

Puoi usare float?

.centro {
margin-left: 20%;
margin-right: 20%;
padding: 0px;
float:left;
}

.sx, .dx {
float:left;
width: 20%;
margin: 0px;
}

[Delas]

mmmm... al limite

.centro { 
margin-left: 20%; 
margin-right: 20%; 
padding: 0px; 
float:center; 
} 

.sx { 
float:left; 
width: 20%; 
margin: 0px; 
}

.dx { 
float:right; 
width: 20%; 
margin: 0px; 
}

si, ci sono dei miglioramenti, in quanto la barra inferiore adesso sta giù... ma quella di dx sta a dx ma sotto alla centrale:

+-----+---------+
| .sx | .centro |
|     |         |
|     |         |
|     |         |
|     |         |
|     |         |
|     |         |
+-----+---------+-----+
                | .dx |
                |     |
                |     |
                |     |
                |     |
                |     |
                |     |
+---------------+-----+
| .bottom             |
+---------------------+

:master:

[Mutato]

Accade quando la dimensione delle colonne supera il 100%, devi contare il margin, il padding i bordi e sottrarlo a 100, il resto lo suddividi tra le colonne.

Prova con una larghezza fissa, cosi' vedi se funziona e poi passi al %

[Delas]

ho provato: viene tutto più ristretto ma la cella di dx resta sotto...

[Mutato]

ehm... anche centro deve essere float:left;

se ci fossero otto colonne le prime sette devono essere float:left; l'ultima puo' essere right.

float:center; non e' un valore valido.

Non l'avevo visto prima

[Delas]

fantastico! adesso provo a mettere le percentuali e vediamo cosa viene fuori...
intanto grazie mille!

[Pasco]

hai specificato l'html al 100%?

body , html { width: 100%; }

[Delas]

sinceramente, non sapevo che body e html potessero avere dimensioni diverse da 100%...
:master:

[Mutato]

Originariamente inviato da Delas
sinceramente, non sapevo che body e html potessero avere dimensioni diverse da 100%...
:master:

Possono anche avere dimensioni diverse, ma non sempre funziona. Alibi 2.0 in firma usa una cosa del genere, ma ho giusto visto oggi che sulla 5 di IE fa schifo, quindi al piu' presto dovro' creare un div che contenga tutto.

cmq, se proprio vuoi una sintassi corretta e'

html, body {
display:block;
width:100%;
margin:0 Important; padding:0 !Important;
}