Come da oggetto, vorrei che il div "bottom" fosse allineato a fondo
pagina indipendentemente dall'altezza del left e del main; un po' come
quando si usavano le tabelle e si metteva ad esempio:
  • height 100% alla tabella contenitore
  • height 50px all'header
  • nessuna altezza al left ed al main
  • height 50px al bottom


Vi posto il codice HTML ed il CSS.

PS: ho cercato sul forum, poi in italiano ed in inglese su Google e su altri mdr ma
non ho trovato nulla...

Grazie a tutti.

HTML
codice:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
	<head>
		<title>Layout fisso a due colonne</title>
		<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
	</head>
	<body>
		<div id="container">
			<div id="header">header
</div>
			<div id="left">left
</div>
			<div id="main">main
</div>
			<div id="bottom">bottom
</div>
		</div>
	</body>
</html>
CSS
codice:
* {
	color: #666666;
	font-size: 100%;
	margin: 0;
	padding: 0;
}

body {
	background-image: url(bg.gif);
	background-position: center;
	background-repeat: repeat-y;
	margin: 0 auto 0 auto;
	text-align: center;
}

div#container {
	border: 0px #000000 solid;
	margin: 0 auto 0 auto;
	padding:0px;
	position: relative;
	text-align: left;
	width: 700px;
}

div#header {
	border: 1px #000000 solid;
	height: 100px;
	margin: 0 auto 0 auto;
	text-align: left;
	width: 698px !important;
	width/**/: 700px;
}

div#left {
	border: 1px #000000 solid;
	float: left;
	padding:0px;
	text-align: left;
	width: 148px !important;
	width/**/: 150px;}

div#main {
	border: 1px #000000 solid;
	float: left;
	padding:0px;
	text-align: left;
	width: 548px !important;
	width/**/: 550px;
}

 div#bottom {
	border: 1px #000000 solid;
	clear: both;
	height: 30px;
	margin: 0 auto 0 auto;
	text-align: left;
	width: 698px !important;
	width/**/: 700px;
}