Sto cercando di ottenere il seguente layout, come da screenshot.Layout con CSS (o dovrei rinunciare e utilizzare tabelle?)
caratteristiche principali sono
- schermo diviso in 3 regioni (colonne);
- Le colonne sinistra/destra sono a larghezza fissa;
- colonna Medio espande secondo Browser larghezza
- colonna destra è suddivisa in due regioni
- regione di fondo è di dimensioni fisse, sempre nella parte inferiore
- regione superiore espande secondo altezza Browser
Uso Le tabelle HTML mi hanno impiegato circa 2 ore per generare lo screenshot sopra, con le funzionalità di cui sopra.
Dopo l'imbottitura in giro con i CSS per due giorni, non posso farlo guardando come sopra, il mio tentativo di CSS e associata screenshot seguire qui sotto:
<html>
<head>
<title>My Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body{
height:100%;
background:beige;
}
#header {
width:100%;
height:60px;
text-align:center;
background:#A7C942;
color:#fff;
float:left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:2em;
}
#leftDiv {
float:left;
width:150px;
height:90%;
background:aquamarine;
}
#midDiv {
float:left;
width:auto;
height:90%;
background:lightsalmon;
display:block;
}
#rightDiv {
float:right;
width:365px;
height:90%;
background:green;
display:block;
}
#topRow {
background-color:lightgoldenrodyellow;
}
#bottomRow {
background-color:lightpink;
height:200px;
}
</style>
</head>
<body>
<div id="body">
<div id="main">
<div id="header">my header</div>
<div id="leftDiv">
<p>LEFT</p>
</div>
<div id="midDiv">
<p>MIDDLE</p>
</div>
<div id="rightDiv">
<p>RIGHT</p>
<div id="topRow">
TOP
</div>
<div id="bottomRow">
BOTTOM
</div>
</div>
</div>
</div>
</body>
</html>
Schermata con i CSS: 
Problemi con il tentativo di CSS è:
- La colonna centrale non si espande (parte color salmone);
- invece il colore bianco appare dal nulla;
- non può arrivare regione rosa per rimanere in fondo sempre
- Avvio impossibile regione gialla di allungare su e giù
- involucro indesiderati (cioè la regione di destra va sotto a sinistra, le regioni centrali)
Pertanto, io sto per scatenare la mia soluzione utilizzando tabelle, a meno che qualche fanatico CSS die-hard viene in soccorso con una risposta di lavoro :-)
aggiornamento grandi risposte, al momento di questo aggiornamento ce n'erano 4. Ho provato tutti e 4 su Firefox e Chrome, e ogni risposta è accettabile. Ma posso sceglierne solo una come risposta accettata, e andrò con quella che è semplice e semplice usando solo css e posizionamento assoluto (senza flexbox né css-tables).
Grazie mille a @matthewelsom, @Pangloss, @Shrinivas, @Paulie_D; Sono sicuro che chiunque si imbatta nelle tue risposte lo troverà utile per il loro caso d'uso. Upvotes per tutti, i tuoi sforzi sono apprezzati!
Perché non utilizzare il bootstrap? Renderà questo più semplice e reattivo http://getbootstrap.com/css/ –
@DavidChavez Sicuramente la scelta giusta qui. – codedude
Domanda davvero ben fatta. Non usare il bootstrap, impara a farlo 'correttamente'! –