Relative Position and Whitespace at bottom below footer

I am facing a peculiar issue with regards relative positioning of a center div and whitespace below the footer.

Here is the basic framework


<html>
<head>
<style type="text/css">
html, body {
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
}
body {
	min-height: 100%;
	background: none;
}
#header {
	position: absolute;
	top: 0;
	width: 100%;
	background:#F00;
}
#maincontainer {
	position: relative;
	float: none;
	top: 200px;
	width: 100%;
	height: auto !important;
	z-index: 1000 !important;
	display: block;
	clear: both;
	margin: 0 auto;
	background:#900;
}

#footercontainer {
	width: 100%;
	clear: both !important;
	position: absolute;
	bottom:0; left:0;
	display: block;
	float: none;
	background:#F00;
}
</style>
</head>
<body>
<div id="header">
  <p>test header content</p>
  <p>some more content</p>
</div>
<div id="maincontainer">
  <div id="containermaininner">
    <div id="innerleft">
      <p>some test content </p>
      <p>some test content </p>
      <p>some test content </p>
      <p>some test content</p>
      <p>some more content</p>
    </div>
    <div id="innerright"></div>
    <div class="clear"></div>
  </div>
  <div id="footercontainer">
    <p>test footer content</p>
    <p>more footer content</p>
    <p>more footer content</p>
  </div>
</div>
</body>
</html>


I already have the code for body and html set at height:100%, margin and padding 0.

Now the #maincontainer has position: relative and top= 200px;

Hence, the issue occurs that after the footer there is around 200-220 px of white space and due to this the footer looks somewhere in between.

I even tried position fixed and absolute for maincontainer but doesnot seem to work.

I also tried sticky footer options but even that leaves same amount of white-space and hence I feel that the maincontainer positioning is the cause due to which the 100% height is getting

Is there anyway to make the footer stick to the bottom of the page (not the browser window) so that no further scrolling is there after the footer. Right now after the footer there is around 200-220 px of white space and a user can scroll the browser window down even after the footer.

Thanks for all the help

I’m not sure what you are trying to do.

Please give this a look and tell me what it does not do.


<html>
<head>
<style type="text/css">
html, body {
	padding:0;
	margin:0;
}
#header {
	background:#f00;
}
#maincontainer {
	background:#900;
	margin:0 auto;
}
#footercontainer {
	background:#F00;
}

/* modern clearfix */
.cf:before,
.cf:after {
    content:"";
    display:table;
    line-height:0;
}
.cf:after {
    clear:both;
}

</style>
</head>
<body>
<div id="header" class="cf">
    <p>test header content</p>
    <p>some more content</p>
</div>
<div id="maincontainer" class="cf">
    <div id="containermaininner">
        <div id="innerleft">
            <p>some test content</p>
            <p>some test content</p>
            <p>some test content</p>
            <p>some test content</p>
            <p>some more content</p>
        </div>
        <div id="innerright"></div>
        <div class="clear"></div>
    </div>
    <div id="footercontainer" class="cf">
        <p>test footer content</p>
        <p>more footer content</p>
        <p>more footer content</p>
    </div>
</div>
</body>
</html>

@ronpat. Thanks a lot for the code. It works perfect and solves my white space issue.

This code seems to do the trick

/* modern clearfix */
.cf:before,
.cf:after {
    content:"";
    display:table;
    line-height:0;
}
.cf:after {
    clear:both;
}

After adding this, there is no extra white space found after the body / footer.

Thanks very much for the feedback, jaagare.

The white space was being caused by the excaping text margns. There are several ways of preventing that from happening. One is to add a border or some padding (1px is enough) to the top and bottom of the container to keep the text margin from escaping. Another way is to add {overflow:hidden} to the container. The modern clearfix method has the fewest side effects.

Thanks @ronpat for the detailed explanation regarding the white space issue. Appreciated.