dividere pagina in 3 colonne

**supergiox** · 16-08-2011, 16:15

Salve a tutti! sto cercando di dividere la mia pagina così con i div e css:
un'intestazione con larghezza massima; tre colonne aventi la stessa dimensione (sotto l'intestazione).

Non so come fare perché da una parte vorrei che le dimensioni fossero relative alla finestra, e quindi vorrei evitare di usare px. D'altra parte vorrei che le posizioni dei div restassero invariate anche se uno di essi viene nascosto (con javascript).

Potreste aiutarmi?
Grazie, ciao!

**supergiox** · 16-08-2011, 17:10

Credo di esserci riuscito! Pubblico il codice sia per eventuali consigli/miglioramenti, sia per aiutare chi ha il mio stesso problema.

CSS:

codice:

html, body{
 margin:0;
 padding:0;
 font-family: "Trebuchet MS", Georgia, Arial, sans-serif;
 font-size:100%;
 text-align:center;
 } 
 
 #intestazione{
 height:20%;
 width: 100%;
 background-color: green;

 }
 #contenitore{
 width: 98%;
 margin: 1% 1% 1% 1%;
 background:#8a9;
 height:76%;

 }

.sin{
 position: relative;
 height: 100%;
 float: left;
 margin-right: 8%;
 background-color: red;
 width:28%;

 }

.cen{
 position: relative;
 float: left;
 background: yellow;
 width: 28%;
 height: 100%; 
 
}

.des{
 position: relative;
 float: right;
 background: blue;
 width:28%;
 height: 100%;

}

HTML:

codice:

<html>
<head><title>prova div</title>
<link rel="stylesheet" href="css/div.css" type="text/css"> 
</head>
<body>

<div id="intestazione">intestazione</div>
<div id="contenitore">

<div class="sin">sinistra</div>
<div class="cen">centro</div>
<div class="des">destra</div>

</div>
</body></html>

Discussione: dividere pagina in 3 colonne

Strumenti discussione

Ricerca discussione

Visualizza

dividere pagina in 3 colonne

Permessi di invio