CSS Positioning Problems

[redhead412]

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;

}

 

[Phreaddee]

clear:both will only do something if you have floating on.

the main section divs will need to be float:left

to make it not go funky in IE add position:relative and display:inline to the main section divs as well.

add overflow:hidden to the parent wrapper

remove the height values from your parent wrapper if it is to stretch with the rest of the site. height:100% is only 100% of the viewport (ie the browser window) and not 100% overall. if you have any divs that hang below the browser window then the parent wrapper will never do its job.

 

[redhead412]

Thanks for the tips! Finally got it all figured out.