Footer queda en el medio

[mktalternativa]

Hola hace rato que estoy luchando con este codigo el footer siempre me queda en el medio alguien me puede orientar

Código:

	<div id="content"> 



                 <div id="sidebar">

                     sidebar

                   </div>


                 <div id="main">
       
                 contenido 

                 </div>

</div>

<div id="footer">
</div>

css

Código:

#content{
	width:960px;
	height:auto;
	
position:relative;
	top:385px;
	left:50%;

	margin-left:-480px;
	background-image:url(imagenes/brillo-contenido.png);
	background-repeat:repeat-y;
}



#main{
	width:696px;
	height:auto;
	position:relative;
	margin-top:45px;
	left:0px;
	float:left;
	background-color:#fff;
	border:#CCC solid 1px;
}




#sidebar{
	width:250px;
	height:300px;
	position:absolute;
	top:45px;
	left:710px;
	background-color:#FFF;
}


#footer{
	width:100%;
	height:175px;
	position:relative;
	bottom:1%;
	
clear:both;

	margin-top: 20px;
	background-color:#1D1D32;
}

[jeancarsas]

Creo que esto es lo que quieres hacer

Código CSS:

<style>
*{
    font-family:Arial, Helvetica, sans-serif;
    font-size:20px;
    margin:0;
    padding:0px;}
 
#content{
    width:100%s;
    height:auto;
    position:relative;
    overflow:hidden;
}
 
 
 
#main{
    width:70%;
    min-height:300px;
    position:relative;
    float:left;
    background-color:red;
}
 
 
 
 
#sidebar{
    width:30%;
    min-height:300px;
    position:relative;
    float:left;
    background-color:blue;
 
}
 
 
#footer{
    width:100%;
    min-height:175px;
    position:relative;
    clear:both;
    background-color:yellow;
}
</style>
 

Código HTML:

<div id="content"> 
                 <div id="sidebar">
                     Sidebar
                  </div>
 
 
                 <div id="main">
                    Contenido Principal 
                 </div>
</div>
 
<div id="footer">
Footer
</div>