CSS Positioning Trouble

I feel like I’ve read every tutorial there is out there on how to fix this problem, and it seems that it should be a fairly easy thing to fix, but I just can not get my div layers to go where I want them. I also want the main “container” div to expand no matter which side is longer (left or right). I’ve tried floating the div layers, but that causes them to go behind my footer div, and “clear:both” doesn’t seem to do anything. The page I am working on can be found here.

And here is my css

html {
height:100%; /* needed for container min-height */
}

body {
background-color:#ccb095;
text-align: center; /*fixes IE bug when centering all content */
font-family: century gothic, arial, verdana, san-serif;
font-size: 11px;
line-height: 1.5em;
color: #000000;
margin-top:0;
}

a:link {color:black; }
a:visited {color:black; }
a:hover {color:black; text-decoration:none;}
a:active {color:white; text-decoration:none;}

#container {
width: 767px;
margin-left: auto;
margin-right: auto;
text-align: left; /*positions text left aligned, and the margins are set
to auto to keep layout centered*/
position: relative;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
background-image:url(../layout_images/container_background.jpg);
border:#000000 5px solid;
}

#content{
position:relative;
top:-570px;
left:200px;
width: 550px;
border: #000033 3px solid;
}

#navigation{
position:relative;
left:10px;
top: -450px;
width: 160px;
border: #000033 3px solid;
}

#footer {
position:relative;
background-color: #e7d3c0;
border:#000000 1px solid;
width: 770px;
height:35px;
margin-top: 5px;
text-align:center;
margin-left:auto; /*centers the div layer*/
margin-right:auto; /*centers the div layer*/
clear: both;

}