CSS Website Layout. Coloane inegale.

Coloane inegale (Unequal Columns)

Conținutul principal este cea mai mare și cea mai importantă parte a site-ului dvs.
Este comună cu lățimile inegale ale coloanei, astfel încât cea mai mare parte a spațiului este rezervată conținutului principal. Conținutul lateral (dacă există) este adesea folosit ca o navigare alternativă sau pentru a specifica informații relevante pentru conținutul principal. Modificați lățimile după cum doriți, amintiți-vă doar că ar trebui să adauge până la 100% în total:

Exemplu:

.column {
  float: left;
}

/* Coloana stânga și dreapta */
.column.side {
  width: 25%;
}

/* Coloana de mijloc */
.column.middle {
  width: 50%;
}

/* Responsive layout - face ca cele trei coloane să se stivească una peste alta în loc de una lângă alta */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Rezultat: