I am facing an issue where the main-div and footer-div are not growing with the content as expected. While setting the height to auto works fine for the footer, it messes up the page for the main content. Specifically, the footer ends up taking over the entire footer and main content together. The structure of my page looks like this:
<div id="page-wrapper">
<div id="header"></div>
<div id="main-wrapper"></div>
<div id="footer"></div>
</div>
Here is the CSS for each div:
#page-wrapper{
margin-left:auto;
margin-right:auto;
width:85%;
-moz-box-shadow: 6px 0 4px -4px #888 , -6px 0 4px -4px #888;
-webkit-box-shadow: 6px 0 4px -4px #888 , -6px 0 4px -4px #888;
box-shadow: 6px 0 4px -4px #888 , -6px 0 4px -4px #888;
border-right:solid 1px #CCC;
border-left:solid 1px #CCC;
}
#header{
margin-left:auto;
margin-right:auto;
width:100%;
height:200px;
background-color:#ffffff;
}
#main-wrapper{
width:100%;
height:auto; /* this line is the problem */
margin-left:auto;
margin-right:auto;
background-color:#E5E7EE;
}
#footer{
width:100%;
height:auto;
background-color:#ffffff;
}
UPDATE:
Within main-wrapper, there are two additional divs:
#text-wrapper{
width:60%;
float:left;
font-weight:300;
padding-left:50px;
}
#login-register-field{
float:right;
width:300px;
height:260px;
background-color:#BDBCC4;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius:12px;
margin-right:40px;
margin-top:80px;
position:relative;
}
Could these inner divs be causing the issue?