CODEWITHSUNDEEP
csshtml
Andrew
Andrew

Reputation: 1025

How to make div stretch along with body?

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

Upvotes: 2

Views: 6332

Answers (6)

Sinan
Sinan

Reputation: 5980

Maybe you should try adding: clear: both to footer class

Upvotes: 0

Ray
Ray

Reputation: 21905

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.

Upvotes: 2

HWM-Rocker
HWM-Rocker

Reputation: 617

I had the same problem, now I am using java script (jQuery) to solve it.

In my case it was the div for the menu bar and I calculated the height from the main container plus the height from the header.

$(document).ready(function(){
    var h = $(".main").height() + $(".main").position().top
    $(".lmenu").css({height:h+"px"})
    $(".rmenu").css({height:h+"px"})
});

Right now it seems to make more sense to use the height of the body:

$("body").height()

If there is a version without javascript, it would be interesting to know. But meanwhile this could be a workaround.

Upvotes: 0

Pbirkoff
Pbirkoff

Reputation: 4702

If you have floating elements in your container, try placing clear-both-div at the end of the container div:

<div id="mcontainer">
    ...code

    <div style="clear:both;"></div>

</div>

Upvotes: 0

Patrick
Patrick

Reputation: 17973

try adding html to the height to:

html, body {
    height: 100%;
}

as discussed on A List Apart: http://www.alistapart.com/articles/footers/

Upvotes: 2

thomasvdb
thomasvdb

Reputation: 749

Try to use overflow: hidden; on div.mcontainer.

Upvotes: 0

Related Questions