Positioning problem

[derelict.pt]

Hello,I've ran into a problem while positioning a footer on a webpage. The footer div is located below the content div; when I add a lot of content to the content div the layout looks fine, but with few content the footer will remain too far down, when it should be right below the content. I've tried everything within my reach but I can't make the footer stick to the bottom of the content without messing up the content's position. It seems that the problem is actually the container div that doesn't fit the screen, even though it has little content both on the left and right div; how can I reduce it's height? (changing the height property won't do it).The webpage can be seen at www.canudo.net/derelict/test (IE @ 1024x768, for now); here's the stylesheet:

div.container{		width: 100%;	height: 100%;	line-height: 150%;	border: solid 1px;}div.footer{	position: relative;	width: 100%;	color: white;		clear: left;	text-align: left;	background-color: aliceblue;	margin-left: 1%;	padding: 0.5em;}div.left{	float: left;	width: 18%;	margin: 0;	padding: 0.5em;	background-color: black;}div.right{	margin-left: 17%;	padding: 0.5em;}div.content{	position: relative;	text-align: left;	padding: 0.5em;	background-color: #C0C0C0;	width: 100%;	top: 60px;	margin-bottom: 7%;}h2.header{	padding: 0;	margin: 0;	text-align: right;	font-style: bold;	color: #C0C0C0;}body {		font: 80% verdana, arial, sans-serif;	color: white;	background-color: black;}/************** MENU ********************/dl, dt, dd, ul, li {	margin: 0;	padding: 0;	list-style-type: none;}#menu {	position: absolute;	top: 11%;	left: 19%;	z-index: 100;	width: 100%;	color: white;}/*** Itens*/#menu dl {	text-align: center;	float: left;	width: 9em;	font: 100% verdana, arial, sans-serif;	color: white;}#menu dt {	cursor: pointer;	text-align: center;	font-weight: bold;	background: #C0C0C0;	border-bottom: thin solid white;}/*** Sub-Itens*/#menu dd {	display: none;}#menu li {	text-align: center;	height: 100%;		opacity:.80;	-moz-opacity: 0.8; /* for Mozilla browsers */	filter: alpha(opacity=80);	background: #C0C0C0;}#menu li a, #menu dt a {	color: white;	text-decoration: none;	display: block;	height: 100%;	border: 0 none;}#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {	background: #eee;}

Thanks in advance

[Chandra.Vedantham@gmail.com]

Hi,Since the height of the container style is set as 100%, the footer appears far below the page.Setting the height to auto will fix the problem, however if the content is too less then the footer will look odd.Try it out and if it is not ok let me know.

[derelict.pt]

It worked perfectly :)You've just made the best debut I've ever seen Thanks