RSS del sito
In due diverse occasioni mi è capitato di scrivere del modo di fare i div del content e del sidebar di altezza sempre uguale – anche quando uno dei due ha molti più contenuti dell’altro – con il solo CSS (quando il sidebar è a sinistra e quando il sidebar è a destra). In quei due paragrafi, però, avevo scritto dei div con la larghezza espressa in percentuali e avevo promesso di dedicarmi alla larghezza fissa in un momento del futuro indefinito… Ebbene, il momento è giunto!
Vediamo come si realizzano quattro opzioni diverse:
1. il sidebar a sinistra + il content a destra di altezza uguale e con i valori di larghezza fissi;
2. il sidebar a sinistra + il content a destra di altezza uguale e con i valori di larghezza minimi fissi;
3. il content a sinistra + il sidebar a destra di altezza uguale e con i valori di larghezza fissi;
4. il content a sinistra + il sidebar a destra di altezza uguale e con i valori di larghezza minimi fissi.
Procediamo proprio nell’ordine appena stabilito.
1. Il sidebar a sinistra + il content a destra di altezza uguale e con i valori di larghezza fissi
Il risultato che vogliamo ottenere è, schematicamente, quello della immagine seguente (dal punto di vista grafico può essere personalizzato, ora ci interessano solo l’altezza e la larghezza):
Il codice HTML della pagina in questione contenuto tra i tag <body>…</body> è questo:
<body>
<div class="col-wrap1">
<div class="col-wrap2">
<div class="col1">
<div class="content" id="c1">
<p>Il sidebar a sinistra.</p>
</div>
</div>
<div class="col2">
<div class="content" id="c2">
<p>Il content a destra.<br>Supponiamo che sia esso ad avere il contenuto maggiore.<br>Si vede bene?</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
Ipotizziamo ora di voler fare il sidebar di larghezza fissa 250 pixel e il content di larghezza fissa 500 pixel, entrambi di altezza uguale indipendentemente dalla quantità dei contenuti. Il codice CSS della pagina è allora questo:
.col-wrap1 {
width: 250px;
background: url(bg1.png) #BD4A4A bottom right no-repeat;
border: 10px solid #FF0000;
position: relative;
left: 7%;
}
.col-wrap2 {
width: 500px;
position: relative;
left: 100%;
margin: -10px -200% -10px 50px;
background: url(bg2.png) #999999 bottom left no-repeat;
border: 10px solid #000000;
}
.col1 {
float: left;
width: 50%;
margin-right: -100%;
position: relative;
left: -50%;
margin-left: -60px;
}
.col-wrap1, .col-wrap2 {
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
.content { padding: 20px; }
p { margin-top: 0; }
.clear {
clear: both;
font-size: 0;
overflow: hidden;
}
Il posizionamento dei due blocchi sugli assi orizzontale e verticale (per esempio, al centro della pagina) può essere impostato con il tag body {…} in CSS.
Sotto questo link si trova un esempio illustrativo funzionante.
2. Il sidebar a sinistra + il content a destra di altezza uguale e con i valori di larghezza minimi fissi
Questa opzione potrebbe esserci utile quando vogliamo sfruttare in un modo ottimale gli schermi grandi e, allo stesso tempo, per qualche motivo non vogliamo avere i blocchi troppo stretti sugli schermi più piccoli (per le larghezze dei sidebar e content espresse solo con le percentuali si veda l’apposito paragrafo).
Il risultato che vogliamo ottenere è, schematicamente, quello della immagine seguente:
Il codice HTML della pagina in questione contenuto tra i tag <body>…</body> è questo:
<body>
<div class="col-wrap1">
<div class="col-wrap2">
<div class="col1">
<div class="content" id="c1">
<p>Il sidebar a sinistra.</p>
</div>
</div>
<div class="col2">
<div class="content" id="c2">
<p>Il content a destra.<br>Supponiamo che sia esso ad avere il contenuto maggiore.<br>Si vede bene?</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
Ipotizziamo ora di voler fare il sidebar di larghezza 25% ma mai inferiore ai 250 pixel e il content di larghezza 50% ma mai inferiore ai 500 pixel, entrambi di altezza uguale indipendentemente dalla quantità dei contenuti. Il codice CSS della pagina è allora questo:
.col-wrap1 {
width: 25%;
min-width: 250px;
background: url(bg1.png) #BD4A4A bottom right no-repeat;
border: 10px solid #FF0000;
position: relative;
left: 7%;
}
.col-wrap2 {
width: 50%;
min-width: 500px;
position: relative;
left: 100%;
margin: -10px -200% -10px 50px;
background: url(bg2.png) #999999 bottom left no-repeat;
border: 10px solid #000000;
}
.col1 {
float: left;
width: 50%;
margin-right: -100%;
position: relative;
left: -50%;
margin-left: -60px;
}
.col-wrap1, .col-wrap2 {
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
.content { padding: 20px; }
p { margin-top: 0; }
.clear {
clear: both;
font-size: 0;
overflow: hidden;
}
Il posizionamento dei due blocchi sugli assi orizzontale e verticale (per esempio, al centro della pagina) può essere impostato con il tag body {…} in CSS.
Sotto questo link si trova un esempio illustrativo funzionante.
3. Il content a sinistra + il sidebar a destra di altezza uguale e con i valori di larghezza fissi
Il risultato che vogliamo ottenere è, schematicamente, quello della immagine seguente:
Il codice HTML della pagina in questione contenuto tra i tag <body>…</body> è questo:
<body>
<div class="col-container">
<div class="col-wrap2">
<div class="content" id="c2">
<p>Il content a sinstra.<br>Supponiamo che sia esso ad avere il contenuto maggiore.<br>Si vede bene?</p>
</div>
</div>
<div class="col-wrap1">
<div class="content" id="c1">
<p>Il sidebar a destra.</p>
</div>
</div>
</div>
</body>
Ipotizziamo ora di voler fare il content di larghezza fissa 500 pixel e il sidebar di larghezza fissa 250 pixel, entrambi di altezza uguale indipendentemente dalla quantità dei contenuti. Il codice CSS della pagina è allora questo:
body { display: flex; }
.col-container {
display: flex;
align-items: stretch;
gap: 40px;
}
.col-wrap1 {
width: 250px;
background: url(bg1.png) #BD4A4A bottom right no-repeat;
border: 10px solid #FF0000;
border-radius: 8px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.col-wrap2 {
width: 500px;
margin: 0 0 0 12%;
background: url(bg2.png) #999999 bottom left no-repeat;
border: 10px solid #000000;
border-radius: 8px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.content {
padding: 20px;
flex: 1;
overflow-y: auto;
}
p { margin-top: 0; }
Il posizionamento dei due blocchi sugli assi orizzontale e verticale (per esempio, al centro della pagina) può essere impostato con il tag body {…} in CSS.
Sotto questo link si trova un esempio illustrativo funzionante.
4. Il content a sinistra + il sidebar a destra di altezza uguale e con i valori di larghezza minimi fissi
Questa opzione potrebbe esserci utile quando vogliamo sfruttare in un modo ottimale gli schermi grandi e, allo stesso tempo, per qualche motivo non vogliamo avere i blocchi troppo stretti sugli schermi più piccoli (per le larghezze dei sidebar e content espresse solo con le percentuali si veda l’apposito paragrafo).
Il risultato che vogliamo ottenere è, schematicamente, quello della immagine seguente:
Il codice HTML della pagina in questione contenuto tra i tag <body>…</body> è questo:
<body>
<div class="col-container">
<div class="col-wrap2">
<div class="content" id="c2">
<p>Il content a sinstra.<br>Supponiamo che sia esso ad avere il contenuto maggiore.<br>Si vede bene?</p>
</div>
</div>
<div class="col-wrap1">
<div class="content" id="c1">
<p>Il sidebar a destra.</p>
</div>
</div>
</div>
</body>
Ipotizziamo ora di voler fare il content di larghezza 50% ma mai inferiore ai 500 pixel e il sidebar di larghezza 25% ma mai inferiore ai 250 pixel, entrambi di altezza uguale indipendentemente dalla quantità dei contenuti. Il codice CSS della pagina è allora questo:
body { display: flex; }
.col-container {
display: flex;
align-items: stretch;
gap: 40px;
}
.col-wrap1 {
width: 25%;
min-width: 250px;
background: url(bg1.png) #BD4A4A bottom right no-repeat;
border: 10px solid #FF0000;
border-radius: 8px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.col-wrap2 {
width: 50%;
min-width: 500px;
margin: 0 0 0 12%;
background: url(bg2.png) #999999 bottom left no-repeat;
border: 10px solid #000000;
border-radius: 8px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.content {
padding: 20px;
flex: 1;
overflow-y: auto;
}
p { margin-top: 0; }
Il posizionamento dei due blocchi sugli assi orizzontale e verticale (per esempio, al centro della pagina) può essere impostato con il tag body {…} in CSS.
Sotto questo link si trova un esempio illustrativo funzionante.
Benissimo, ora posso dire di avere preso in considerazione tutte le situazioni che vi potrebbero capitare di affrontare mentre cercate di fare i div del content e del sidebar di altezza uguale. Fino alla comparsa dei cambiamenti radicali nel CSS l’argomento potrebbe essere considerato chiuso: a meno che qualche lettore non mi scriva qualche propria osservazione o proposta in merito a quanto ho scritto.
