Layout fluido tre colonne

**alexic** · 24-08-2005, 13:41

Salve a tutti,
sto facendo un layout per un sito (php).

Questo layout utilizza i css: contenuti in html e impaginazione/grafica con i css.

Ho il seguente problema:

Lo schema è questo:
-------------------------------------
| HEADER |
-------------------------------------
| | | |
| | | |
|menu 1 | contenuti |menu 2 |
| | | |
| | | |
| | | |
| | | |
-------------------------------------
| FOOTER |
-------------------------------------

ovvero un layout fluido a tre colonne.

Ogni parte (header, footer menu ecc) è realizzato logicamente mediante un div.

Vorrei realizzare che l'altezza dei tre div corrispondenti a menu1, menu2 e contenuti sia determinata dall'altezza del div con altezza maggiore.

Non sono riuscito a trovare una soluzione soddisfacente. Mi potete aiutare?

Grazie...

Per comodità vi allego il codice:

=============================
CODICE HTML
=============================
<body>

<div id="header">
CONTENUTI HEADER
</div>

<div id="leftcolumn">
MENU 1

<div id="sanlucasx">
QUI E' PRESENTE UNA BARRA ARANCIONE DECORATIVA POSTA A FIANCO DEL MENU1
</div>
</div>
<div id="rightcolumn">

MENU 2
</div>

<div id="content">

QUI CI VANNO I CONTENUTI

</div>

<div id="footer">
QUESTO E' IL FOOTER
</div>

</body>

=============================
CODICE CSS
=============================

/*CODICE BODY*/
body {color: black; background: white; margin: 0; padding: 0;font-family: Verdana, Arial, Helvetica, sans-serif;}

/*CODICE HEADER*/
div#header{background-color: #235bd9; width:100%;height:126px;}
div#headerbar{background-color: #5a7fdb; height:20px;float:clear; }

/*CODICE MENU1*/
div#leftcolumn{background-color:#D8DaE7;width: 231px;font-size:12px; float:left;background-image: url(menusx.bmp); height:1000% }

/*CODICE BARRA DECORATIVA*/
div#sanlucasx{background-image: url(parrocchia.bmp); position:relative;bottom:0px;float:right;width:30p x;height:199px;}

/*CODICE MENU2*/
div#rightcolumn{background-color:#D8DaE7;width: 231px;font-size:12px; float:right;background-image: url(menusx.bmp);height:1000% }

/*CODICE CONTENUTI*/
div#content{margin-left:231px;margin-right:231px;}

/*CODICE FOOTER*/
div#footer{background-color: #5a7fdb; height:70px;clear:both; }

**alexic** · 24-08-2005, 13:42

Beh considerate lo schema sopra come a tre colonne...

**smal** · 24-08-2005, 15:39

hai provato a dare come percentuale dell'height il 100% oppure di toglierla completamente, anche da div#sanlucasx?

In ogni caso prova a vedere se qui trovi qualcosa che ti possa essere d'aiuto.

**Zero** · 24-08-2005, 15:49

Dato che conosci la lunghezza, in pixel, dei box laterali (che dovrebbe essere, in linea di massima, la stessa in tutte le pagine) puoi utilizzare min-height per rendere la parte centrale (quella dei contenuti che varia ad ogni pagina) lunga quanto i menu..

Utilizza questo:

codice:

/*CODICE CONTENUTI*/
div#content{
margin-left:231px;
margin-right:231px;
min-height: 400px;
height: auto !important;
height: 400px;
}

Dove "400px" è equivalente alla lunghezza massima dei menu e di conseguenza alla lunghezza minima del contenuto.

**alexic** · 25-08-2005, 20:38

si, ma appena l'altezza supera i 400px?
e poi min-height è solo supportato da mozilla mi sembra...

**Zero** · 25-08-2005, 21:21

Originariamente inviato da alexic
si, ma appena l'altezza supera i 400px?
e poi min-height è solo supportato da mozilla mi sembra...

Sarebbe bastato testare il codice che ti ho proposto per vedere che (dati alcuni accorgimenti) funziona su tutti i browser

Inoltre, appena si superano i 400 pixel, il box continua ad allungarsi a seconda del testo inserito.

Ciao

Discussione: Layout fluido tre colonne

Strumenti discussione

Ricerca discussione

Visualizza

Layout fluido tre colonne

Permessi di invio