Question

I’ve been searching through forums to find a solution for the problem I’m facing and couldn’t find any. So here I am, again, asking for remedy.

I have this page which encase personal profile form. That form is enclosed in page container div and is quite long that it requires main scrollbar in order to see those hidden. And there’s a footer section at the bottom of the page where copyright statements are displayed.

My problem is I can’t find a way to make my page container div to stretch along with the body element. I’ve applied height: inherit to that div but still it refused to stretch so that it covers till the border of the footer section. Now, there is big gap between the footer and that div filled with body background color. Here’s a screencap for better understanding.

screencap

/*Form container*/  
#form_container{   
 width: 600px;  
 background-color:#FDAE80;  
 margin-top: 15px;  
 margin-left: 110px;  
 padding-top: 10px;  
 padding-left: 20px;  
 padding-right: 20px;  
 padding-bottom: 10px;  
}  

body{   
 margin-top: 0px;  
 margin-bottom: 0px;  
 height: 100%;   
 background-color: #683468;    
}  

/*Page Container*/  
div.mcontainer{   
 width: 1032px;  
 height: inherit;  
 background-color: #ffffff;  
}  

/*Footer Section*/  
div.footer{  
 width: 1032px;  
 height: 80px;  
 border-top: 1px solid #683468;  
 margin-top: 10px;  
 text-align: center;  
 font-family: Arial;  
 font-size: 12px;  
 color: red;  
 position: relative;  
 bottom: 0px;  
 background-color:black;  
}  

Any help would be appreciated.

EDIT Just to clarify, Footer section is inside page container div. Here my html – htm

Answer 1

Try adding a clearing element as the last item in your page container, after all the form elements. Could be <br clear="all" /> or a div with style clear:both.

A better idea – remove the height: inherit; from your mcontainer style. This fixed it for me.