Sito centrato, colonna sinistra nascosta

[AltF4]

Ciao a tutti, ho realizzato un layout centrato a 3 colonne, una a sinistra, una al centro ed un'altra a destra.

Il problema che ho è che quando il sito viene visualizzato su un monitor più piccolo risulta tagliato sulla sinistra, lo scroll funziona solo verso destra.

Qui una demo: http://demoaltf4.altervista.org/sitocentro/

E questo è il codice css:

html, body { 
  width: 100%; 
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
}
.main {
  min-height: 100%;
  height: auto !important;
  height:100%;
  margin: 0 auto -340px;
  width: 100%;
  background-color: #FFFFFF;
}
.ColSx {
  width: 240px;
  min-height: 100%;
  height: 800px;
  margin-left: 0px;
  float: left;
  background-color: #FFAA00;
}
.ColCenter {
  width: 542px;
  height: 800px;
  padding-left: 20px;
  padding-right: 20px;
  float: left;
  font-size: 14px; 
   text-align: justify;
  line-height: 1.8em;
  color: #4b4b4b;
  border-style: none dotted none dotted;
   border-width: 1px;
  border-color: #666666;
  background-color: #FFBB22;
}

.ColDx {
  width: 240px;
  height: 800px;
  margin-left: 0px;
  float: left;
  background-color: #FFAA44;
}
.header {
  width: 100%;
  height: 190px;
  text-align: center;
  background-color: #CCCCCC;
}

.MainBox {
  width: 1064px;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  position: relative;
  left: 50%;
  margin-left: -532px;
  margin-top: 20px;
  margin-bottom: 0;
  background-color: #000000;
}
.pushFooter {
  height: 340px;
  width: 100%;
  clear: both; 
}
.footer {
  width: 100%;
  height: 340px;
  text-align: center;
  position: relative;
  margin-top: 40px;
  background-color: #999999;
}

Non riesco a capire i motivi

[AltF4]

Ho provato ad inserire un altro contenitore, prima delle 3 colonne, ma niente da fare.

La cosa strana è che il browser a sinistra taglia il contenuto e lo scroll funziona solo verso destra.

Ho provato a fare una ricerca, ma non riesco a trovare quello di cui ho bisogno.

[Konan90]

E' sufficiente modificare il codice della classe .MainBox come segue:

.MainBox {
  width: 1064px;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  position: relative;
  margin-left: auto;
  margin-top: 20px;
  margin-bottom: 0;
  margin-right: auto;
  background-color: #000000;
}

Il problema era la proprietà left: 50% che faceva spostare il tutto a destra.
Inoltre, inserendo le proprietà margin-left: auto e margin-right: auto, ottieni tutto il contenuto centrato.

Così facendo hai ottenuto l'effetto desiderato, ma ci sarebbe da rivedere un pò il tutto, in quanto non sono state rispettate le regole del Web Design Responsive. Ti consiglio di leggere la guida: http://www.html.it/guide/responsive-...sign-la-guida/

[AltF4]

E' sufficiente modificare il codice della classe .MainBox come segue:

.MainBox {
  width: 1064px;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  position: relative;
  margin-left: auto;
  margin-top: 20px;
  margin-bottom: 0;
  margin-right: auto;
  background-color: #000000;
}

Il problema era la proprietà left: 50% che faceva spostare il tutto a destra.
Inoltre, inserendo le proprietà margin-left: auto e margin-right: auto, ottieni tutto il contenuto centrato.

Così facendo hai ottenuto l'effetto desiderato, ma ci sarebbe da rivedere un pò il tutto, in quanto non sono state rispettate le regole del Web Design Responsive. Ti consiglio di leggere la guida: http://www.html.it/guide/responsive-...sign-la-guida/

Grazie mille!!!

Stavo proprio ora postando una soluzione che avevo trovato, in pratica proprio come quella da te suggerita, solo in maniera compatta:

.MainBox {
  width: 1064px;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  position: relative;
  margin: 20px auto 0 auto;
  background-color: #000000;
}

Sembrerebbe funzionare: http://demoaltf4.altervista.org/sitocentro2/

Ti ringrazio, gentilissimo!

Cercherò di approfondire anche le regole per i siti responsive.

Grazie ancora