Layout fluido a 3 colonne

[Gae58]

salve,

scusate la domanda, probabilmente semplice per voi, ho un CSS per la visualizzazione di un layout a 3 colonne fluido.

Sembra funzionare tutto bene, tranne quando ridimensiono lo schermo in quanto le 2 colonne laterali (quelle dei menù) si stringono e solo in ultimo la parte centrale, il corpo.

Invece vorrei che si stringesse prima il corpo e poi le 2 colonne laterali.
Ho provato con min-width nelle 2 colonne ma niente da fare.

Vorrei che fosse anche responsive

Qualche aiuto?

garazie
Gaetano

[Experiment8]

Ciao,

Così è un pò difficile risponderti, avresti un link o del codice da mostrare?

[Gae58]

Ecco il Codice che m'interessa modificare:
#sidebar-first,
#sidebar-second {
/*width: 240px;*/
/* Larghezza Colonna a Sx e Dx*/
width: 15%;
}


Qui sotto il codice completo:


/* ---------- Basic Layout Styles ----------- */


html,
body,
#page {
height: 100%;
/*width: 90%;*/
}
#page-wrapper {
/*min-width: 960px;*/
/*min-width: 90%;*/
}
#header div.section,
#featured div.section,
#messages div.section,
#main,
#triptych,
#footer-columns,
#footer {
/*Larghezza della Pagina in Assoluto*/
width: 90%;
margin-left: auto;
margin-right: auto;
}
#header div.section {
position: relative;
}
.region-header {
float: right; /* LTR */
margin: 0 5px 10px;
}
.with-secondary-menu .region-header {
margin-top: 3em;
}
.without-secondary-menu .region-header {
margin-top: 15px;
}
#secondary-menu {
position: absolute;
right: 0; /* LTR */
top: 0;
/*width: 480px;*/
/* Secondary Menu è quello in alto a dx dove c'è LogOut*/
width: 20%;
}
#content,
#sidebar-first,
#sidebar-second,
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last,
.region-footer-firstcolumn,
.region-footer-secondcolumn,
.region-footer-thirdcolumn,
.region-footer-fourthcolumn {
display: inline;
float: left; /* LTR */
position: relative;
}
.one-sidebar #content {
/*width: 720px;*/
width: 84%;
}
.two-sidebars #content {
/*width: 480px;*/
width: 69%;
}
.no-sidebars #content {
/*width: 100%;*/
float: none;
}
#sidebar-first,
#sidebar-second {
/*width: 240px;*/
/* Larghezza Colonna a Sx e Dx*/
width: 15%;
}
#main-wrapper {
/*min-height: 300px;*/
min-height: 30%;
}
#content .section,
.sidebar .section {
padding: 0 15px;
}
#breadcrumb {
margin: 0 15px;
}
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last {
margin: 20px 20px 30px;
width: 280px;
}
#footer-wrapper {
padding: 35px 5px 30px;
}
.region-footer-firstcolumn,
.region-footer-secondcolumn,
.region-footer-thirdcolumn,
.region-footer-fourthcolumn {
padding: 0 10px;
/*width: 220px;*/
width: 25%;
}
#footer {
/* width: 940px;*/
/*min-width: 920px;*/
min-width: 90%;
}

[Experiment8]

Ciao,

sicuramente il min-width non va bene, perché comunque impedisce al box di ridimensionarsi, non ho ben capito invece cosa intendo con "Invece vorrei che si stringesse prima il corpo e poi le 2 colonne laterali.", intendi dire che vuoi avere due "stadi" per cui ad una certa larghezza dell viewport diminuisce il contenuto e poi ad una larghezza ancora minore le bande laterali?

[Gae58]

esatto, perchè quando si stringe la finestra, rimpicciolisce prima le 2 colonne laterali che contengono i menù (e la lettura e la scelta risultano difficili), mentre il copro centrale è ancora ampio.

[Experiment8]

Dovresti quindi impostare una larghezza fissa alle due colonne, quella che ti serve avere. Puoi indicarmi invece quale regola fa riferimento al box centrale nel CSS che hai postato? così ti do un esempio pratico di come risolverlo.

[Gae58]

Ho provato e funziona, però, non sa quale tra le 2 scegliere, in quanto in questa maniera, stringendo la finestra, il corpo scende sotto la colonna sx e la colonna dx si posiziona sotto il corpo. Pensavo si potesse fare in proporzione.

Per il corpo il codice è sotto, e la sua larghezza varia in relazione alla presenza delle colonne laterali, 1-2 o nessuna.

Ti ringrazio per l'aiuto e per i chiarimenti.