Si tratta di un "solito" problema di layout a due colonne: trovi molti esempi in rete (puoi partire dai "link utili" del forum)
Prima di tutto occorre definire la marcatura:
codice:
<body>
<div id="contenitoreA">
<div id="menuB">
menuB</p>
</div>
<div id="contenutoC">
contenutoC</p>
<div id="footerD">
footerD</p>
</div>
</div> <!-- fine contenutoC ->
</div>
</body>
Poi inizi a metter mano al CSS:
codice:
html, body {
width: 100%;
text-align: center; /* solo per centrare in IE */
}
#contenitoreA {
width: 700px;
margin: 0 auto; /* per centrare */
text-align: left; /* per bilancaire il text-align del body */
background: #ddd; /* serve nelle fasi di sviluppo */
}
#contenitoreA:after {
width: 100%;
clear: both;
/* vedi [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float */
}
#menuB {
width: 200px;
background: red; /* serve nelle fasi di sviluppo */
float: left;
}
#contenutoC {
float: left;
width: 499px;
background: green; /* serve nelle fasi di sviluppo */
min-height: 100%;
}
#footerD {
margin: auto 0 0 0;
width: 100%;
height: 100px;
background: blue; /* serve nelle fasi di sviluppo */
}
Se devi fare sfondi diversi tra il B e il C, ti convien usare la tecnica delle false colonne, che trovi ben documentata sia nel forum che in rete: lo sfondo a due colori lo devi aggiungere nel #contenitore.
Permessi di invio
Rispondi quotando