Layout a tre colonne

alexandro

Layout a tre colonne

Ragazzi non metto in dubbio l'utilità e i vantaggi dei DIV, ma c'è davvero da impazzire. Mi chiedo che la sigla non significhi Cervello Sotto Stess...

Dunque, giochicchio da un pò con i CSS, ma mi trovo ad affrontare la costruzione di un layout a tre colonne. Dopo esser riuscito ad ottenere quello che volevo, provo il tutto su i.e. e stavo per scoppiare a piangere alla vista di quello scempio...

Come posso ottenere tre normalissime colonne affiancate, con dimensioni (parlo dell'altezza) indipendenti tra loro? Ho provato ad utilizzare un layout scaricato dalla rete, ma se il contenuto della colonna centrale è inferiore rispetto a quello della colonna sinistra, tutto va a farsi strabenedire.

Ho provato a metterci un min-height ma non ha funzionato.

Posto uno screen per farmi capire

jess

I CSS c'erano già quando si costruiva tramite tabelle. In genere mi sbatto la testa contro l'interpretazione che IE ne fa.
OK, chiuso questa parentesi, dimmi che layout ti serve esattamente, perché ci sono tanti modi per costruirne uno di 3 colonne.

Deve essere di larghezza fissa o liquida?
La colonna sinistra è sempre più lungo di quello centrale o no?
Le colonne si devono estendere per tutta la lunghezza del contenitore o no?
Si può specificare un'altezza fissa oppure deve essere tutto libero?

alexandro

Ciao Jess, grazie per la disponibilità

Beh, semplicemente ho bisogno di questo

Ora il problema è che se riempio troppo la colonna di sx, il contenuto se ne va fuori dal corpo. A me serve solo quella struttura, senza dovermi preoccupare della roba che sbatto dentro i div.

Preferirei larghezza fissa, ma non è fondamentale
No, dipende dalle pagine
Si
No, perchè altrimenti per sicurezza dovrei abbondare dato che ogni tanto può capitare di dover inserire dei testi molto lunghi. E rischierei così di avere delle pagine vuote...

Ti ringrazio ancora per l'aiuto!

greybear

Forse puo' esserti utile questo:

http :// picoflat.altervista.org

scaricatelo e guardati il css/index.php. L'ho sviluppato da un tutorial per farci i miei siti. Sembra a due colonne, ma in verita' sono tre. Il codice php e' brutto, ma io non sono un programmatore php

ciao,
greybear

jess

@Alexandro said:

Ora il problema è che se riempio troppo la colonna di sx, il contenuto se ne va fuori dal corpo. A me serve solo quella struttura, senza dovermi preoccupare della roba che sbatto dentro i div.

Se non ti crea problemi generare lo sfondo per i diversi elementi con un'immagine ripetuto-y ci sarebbe questo layout, dove non ti devi assolutamente preoccupare di quale colonna diventa più lunga:

[HTML]
<html>
<head>
<title>Tre colonne: Larghezza Fissa</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
margin:0;
padding:0;
text-align:center;
background-color: #fff;
/stesso colore di colonna 2 se si usa un backgroundimmagine trasparente in bodyContent/
}
#bodyContent {
width:760px;
text-align:left;
margin:0 auto;
background-image: url(immagini/sfondo-1.png);
/sfondo per le colonne a sx e dx con il centro trasparente
oppure si mette lo sfono per tuti e tre le colonne in un immagine/
background-repeat: repeat-y;
}

#testa {
background:#ccc;
border:1px solid #000;
padding:1em 0;
}

#colonna1 {
float:left ;
width:160px;
padding:1em 0;
}

#colonna3 {
float: right;
width:200px;
padding:1em 0;
}

#colonna2 {
margin:0 200px 0 160px;
padding:1em 0;
background-color:;
}

#piedipagina {
background:#eee;
border:1px solid;
padding:1em 0;
}

.clear{
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
</head>
<body>
<div id="bodyContent">

<div id="testa">
      TESTA
</div>

<div id="colonna1">
COLONNA 1
</div>

<div id="colonna3">
    COLONNA 3
</div>

<div id="colonna2">
COLONNA 2
</div>

<div id="piedipagina">
PIEDIPAGINA
</div>

</div>
</body>
</html>
[/HTML]

alexandro

Grazie mille Jess! Funziona che è una meraviglia!

Grazie anche a te grey per la risposta