Voglio realizzare un layout con header, due colonne (content, menu) e footer. Il comportamento che vorrei è che content e menu riempissero la pagina nel caso in cui il contenuto non fosse sufficiente a riempierla. Nel caso in cui il contenuto fosse molto allora devono lasciare che si allunghi.
Questo layout con le tabelle lo facevo in 2 minuti, adesso però voglio fare tutto tableless anche se devo impazzire all'inizio.
Ho fatto questo seguendo qualche consiglio trovato su internet:

codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Preview</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="menu">menu
menu</div>
<div id="content" style="border:1px solid red;">
contento contenuto cotenuto ....
</div>
<div id="footer">Footer</div>
</div>

</body></html>
codice:
html,body {
	margin:0;
	padding:0;
	height:100%; /* needed for container min-height */
	background:gray;
	font-family:verdana;
	text-align:center;
}
div#container {
	position:relative; /* needed for footer positioning*/
	margin:0 auto; /* center, not in IE5 */
	width:950px;
	background:#f0f0f0;
	
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/

	min-height:100%; /* real browsers */
}
div#header {
	border-bottom:1px solid black;
}
div#footer {
	position:absolute;
	width:100%;
	bottom:0; /* stick to bottom */
	background:#ddd;
	border-top:1px solid gray;
	clear:both;
}
div#content{

}
div#menu{
	float:right;
	width:250px;
	border-left:1px solid black;
	min-height:100%; /* non si estende*/
	height:100%; /* non si estende*/
	background-color:teal;
}
Però, dopo che ho aggiunto il menù, quest'ultimo non si allunga al 100% come fa il content.
Come posso risolvere??




GRAZIE 100%