[CSS] Content bündig mit Footer

Hallo Leute,

ich würde gern, dass class main immer komplett bis zum footer geht. Wie ist das zu realisieren?!

Hier mein CSS und HTML-Datei

HTML:

<div id="all">  
	<div id="header"></div>
<div id="headline">Starseite</div>
	<div id="main"> 

		<div id="content">content
		</div>
        
		<div id="sidebar">sidebar
		</div>
	</div>
</div>

<div id="footer">

	</div>
</div>

Code:

* {margin:0;padding:0}

html, body {height: 100%;}

body {font:11pt Georgia, Times New Roman, serif; 
	background-color:#ffffff;
	color:#444444}


#all {min-height: 100%;
background-color:#00FF00;}

/* Header */
#header {
width:980px;
background-image:url(images/header.jpg);
height:280px;
margin:0 auto;
}

#headline {
padding-top:5px;
padding-bottom:5px;
	background-color:#666666;
	width:980px;
	margin: 0 auto;}

/* Content Area */

#main {overflow:auto;
	margin:0 auto;
	width:980px;
	background-color:#CC6600;}  


#content {width:900px;
float:left;
	background-color:#FF0000;}


/* Sidebar */
#sidebar {width:80px ;float:right;
	background-color:#000066;}

/* Footer */
#footer {position: relative;
	margin-top: -100px; /* negative value of footer height */
	height: 100px;
	clear:both;
	background-color:#333333;} 

Ich hoffe ihr könnt mir helfen )