Hi folks, 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 and it's also inside the page container div.

My problem is I can't find a way to make my page container div to stretch out to accommodate the form which is longer than screen height like body element does. 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. But now, I don't know why, there is a big gap between the footer and the div background color(white), filled with body background color(violet). Here's a screencap for better understanding.

alt text

/*Form container*/  
 width: 600px;  
 margin-top: 15px;  
 margin-left: 110px;  
 padding-top: 10px;  
 padding-left: 20px;  
 padding-right: 20px;  
 padding-bottom: 10px;  

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

/*Page Container*/  
 width: 1032px;  
 height: inherit;  
 background-color: #ffffff;  

/*Footer Section*/  
 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;  

Any help would be appreciated.

1 answer

endrew 0

Ok. got my answer from user-Ray from stackoverflow site. I just needed to add div with clear:both style at the end of the mcontainer div and removed "height" style from mcontainer. Voila, that's it. I'm just posting this solution just in case if anyone run into same problem.

Answered about 9 years ago by endrew