[CSS] layout a tre colonne

**var** · 13-08-2004, 16:21

ragazzi, domanda semplice.
vorrei creare tre div che, disposti verticalmente, occupino tutta la pagina.

quello centrale deve essere a larghezza fissa mentre quelli ai lati, ovviamente, mi dovrebbero ricoprire tutta la parte in eccesso.
come ottengo questo risultato con i CSS?

grazie! :)

**poeta1978** · 13-08-2004, 17:20

Guarda http://www.inknoise.com/experimental/layoutomatic.php

**Jerry Masslo** · 13-08-2004, 17:58

non mi viene in mente nulla, 100% - 400px non si può fare.

con le tabelle si può, ma immagino non ne vuoi sapere

**poeta1978** · 13-08-2004, 18:04

Si può fare, basta che modifichi i valori a mano dopo aver creato il css.

**Jerry Masslo** · 13-08-2004, 18:08

Originariamente inviato da poeta1978
Si può fare, basta che modifichi i valori a mano dopo aver creato il css.

e mettiamo che vuoi una colonna centrale di 400px alle altre che valori dai?

**var** · 13-08-2004, 18:17

Originariamente inviato da Jerry Masslo
e mettiamo che vuoi una colonna centrale di 400px alle altre che valori dai?

avevo provato una cosa del genere per le colonne laterali:

codice:

#sx {
 width:auto;
 height:100%;
 position:relative;
 top:0px;
 left:0px;
}

#dx {
 width:auto;
 height:100%;
 position:relative;
 top:0px;
 right:0px;
}

ma sembra non funzionare...

**poeta1978** · 13-08-2004, 18:19

Calcolando una risoluzione minima di 800x600 (in genere è la più piccola, salvo qualcuno con problemi di vista che può ancora scendere) fai:
centrale 400px
laterali 50% ogn'una

**Jerry Masslo** · 13-08-2004, 18:22

e 50% + 50% dove rimane lo spazio per i 400px?

mi è venuta una mezza idea ora la provo.

**poeta1978** · 13-08-2004, 18:26

Esatto, fai 25 e 25

**Jerry Masslo** · 13-08-2004, 18:40

Originariamente inviato da poeta1978
Esatto, fai 25 e 25

25 cosa? non è possibile sommare o sottrarre pixel e %.

<html>
<head>
<title>Untitled</title>
<style type="text/css">
html, body {height:100%}
*{margin:0;padding:0}

.centro {position:absolute;
top:0;
left:50%;
margin-left:-200px;
width:400px;
background:red;
z-index:100;

}
.sinistra{width:49%;
float:left;
background:silver;
}
.destra{width:49%;
float:right;
background:gray
}
.sinistra p {padding-right:200px}
.destra p {padding-left:200px}
</style>
</head>
<body>
<div><div class="sinistra">

vediamo</p></div>
<div class="destra">

vediamo</p></div></div>
<div class="centro">vediamo</div>
</body>
</html>

una vera schifezza, complicata dal fatta che ho dovuto mettere un div in più perché ie faceva lo strano

Discussione: [CSS] layout a tre colonne

Strumenti discussione

Ricerca discussione

Visualizza

[CSS] layout a tre colonne

Permessi di invio