Bottom margin and height problems

I'm trying to have the dark column in the middle occupy 100% vertically, while having the two adjoining columns occupy 100% vertically, but with a 20px margin at the bottom, would someone point out what I could do?

Erred page

	body {
		font: 11px Verdana, Arial, sans-serif;
		background: #CCCCCC;
		margin: 0px;
		padding: 0px;
		height:100%;
		}
	
	#page{
		width: 630px;
		border: none;
		margin-right: auto;
		margin-left: auto;
		height:100%;
		}
	#content {
		border-color: #000000;
		border: 1px solid;
		border-right: 0px; 
		background-color:#F0F0F0;
		background-image: url('/dead.jpg');
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-position: top;
		float: left;
		border-right: 0px none;
		width: 359px;
		height:100%;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	#banner {
		float: left;
		background: #191818;
		width: 98px;
		margin: 0px 0px 0px 0px;
		border: 1px solid;
		border-color: #000000;
		border-top: 0px;
		border-bottom: 0px;
		height:100%;
	}
	#navigation{
		border-color: #000000;
		border: 1px solid;
		border-left: 0px; 
		background-color:#F0F0F0;
		background-image: url('/dead1.jpg');
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-position: top;
		float: left;
		width:169px;
		height:100%;
		margin-top: 20px;
		margin-bottom: 20px;

	}