CSS - left column overlapping footer

[HexElffilter]

Hi folks,

Need some help on my css.



As you can see the left column overlaps the footer.
I want the footer to have a 20px gap between the left column and the footer.
At the moment the css puts a 20px gap between the right column and the footer, but I want it to look at both columns and put a 20px gap between.

HTML

	<div id="header">
	    <img src="images/mis_logo.jpg" alt="MIS Intranet" />
	</div>
	
	<div id="leftcontainer">
		<div id="left">
			<br />
			<div id="menu">
	  			<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#/#">Link 1</a></li>
					<li><a href="#/#/#">Link 2</a></li>
					<li><a href="#/#/#/#">Link 3</a></li>
				</ul>
			</div>
		</div>
		
		<div id="rightcontainer">	
		<div id="content">
			<p>The content goes in here.</p>
			<p>Extra content added.</p>
			<br />
			<p>Fill out the content a bit more.</p>
		</div>
		</div>
	</div>
	
    <div id="footer">
	    &copy; My Test Site 2007
    </div>

CSS

* {
	margin: 0;
	padding: 0;
	}

body {
    margin: 0 20px;
    padding: 0;
    background-color: #DCDCDC;
}

#header {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: large;
	padding: 0.3em 10px;
	background-color: #FFF;
	border: 1px solid black;
	margin-top: 10px;
	height: 100px;
}
	
#leftcontainer {
	left: 20px;
	}

#left {
	position: absolute;
	left: 20px;
	width: 250px;           /* LC width */
	background-color: #FFF;
	border: 1px solid black;
	margin-top: 20px;
	}
	
#menu ul {
	padding: 0;
	margin: 0;
  	list-style-type: none;
  	}
  
#menu li {
	display: block;
	width: 200px;
  	height: 30px;
	background-color: #FFF;
  	margin: 0;
	padding: 0;
  	}

#menu a, .menu a:visited {
  	display: block;
  	height: 30px;
	padding: 0 15px;
	margin: 0;
  	color: #000;
  	text-align: right; 
  	text-decoration: none;
  	}

#menu a:hover {
    color: #000;
    background-color: #99CC00;
    text-align: right;
    font-weight: bold;
}

#content {
	overflow: hidden;
	border: 1px solid black;
	padding: 10px;
	}

#menu {
	padding: 0;
	margin: 0;
	font-weight: bold;
	}

#rightcontainer {
	right: 20px;
	top: 83px;
	background-color: #FFF;
	margin-left: 271px;
	margin-top: 20px;
	}
	
#footer {
	clear: both;
	background-color: #FFF;
	margin-top: 20px;
	padding: 10px;
	border: 1px solid black;
	}

What's the best solution?

Thanks

 

[MuGeN]

since the column is absolutely positioned you've taken it out of the flow... position your columns with floats and use a clear:both somewhere to clear the floats...

 

[HexElffilter]

Thanks, well that wasn't too difficult.