Gab between Anchored Footer and Main Content Div

**espresso** · Apr 10, 2009 10:52

I have an anchored footer and then a main content div. Problem is there's a gap. I am using overflow:hidden because I want the wrapper div to fill the rest of the page downward with the off-white color that wraps around the main content's image.

http://www.codezest.com/post/site7.png

<body>

<div id="OuterContainer">

<div id="HeaderMain">
HeaderMain
<div id="HeaderContainer"></div>
</div>

<div id="TopNavMain"></div>



<div id="MainContainer">

<div id="MainContent">
<div id="SubHeaderMain">
SubHeaderMain

</div>

<div id="LefNavMain">LeftNavMain</div>
<div id="ProductMainContent">ProductMainContent

</div>
<div id="ProductRightNav">ProductRightNav

</div>
<div id="ProductSubAreaMain">ProductSubAreaMain

</div>
<div id="tabs">
<ul class="tabImages">
<li><a href="#PTabContent"><span><img id="imgPTab" width="262" height="67" src="/Content/Images/Product/tabA_1.gif" /></span></a></li>
<li><a href="#OContent"><span><img id="imgOTab" width="304" height="67" src="/Content/Images/Product/tabA_2.gif" /></span></a></li>
<li><a href="#RContent"><span><img id="imgRTab" width="216" height="67" src="/Content/Images/Product/tabA_3.gif" /><img id="imgRTab_long" width="304" height="67" src="/Content/Images/Product/tabsB_2.gif" /></span></a><img id="imgTopRightTabFiller" width="216" height="67" src="/Content/Images/Product/tabsE_3.gif" /></li>
</ul>
<div id="TabsMain">
<div id="PContent">

</div>
<div id="OContent">

</div>
<div id="RContent">

</div>
</div>
</div>

<div id="TabsMainBottom"></div>
<div id="ButtonCrossSellMain"></div>

</div>
</div>
</div>


<div id="wrap">
<div id="main" class="clearfix">

</div>
</div>

<div id="FooterLine">
<div id="FooterEnd"></div>
<div id="FooterMain"></div>
</div>
</body>

/* CLEAR STYLES
=====================================================================*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-family: Helvetica, Arial, sans-serif;
}

*
{
padding:0;
margin:0;
}

body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* Fixes gaps between images issue - Dave */
img{display:block;}

/*
=====================================================================
STYLES
=====================================================================
*/

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

body
{
background-color: #FAF6F3;
background-image: url(/content/images/site/backgroundfill.jpg);
background-repeat: repeat-x;
margin: 0 auto 0 auto;
color: #666666;
font-size: 11px;
}

input[type="text"]
{
height: 25px;
vertical-align: middle;
border: 1px solid #EAE8E1;
background: transparent url(/content/images/site/textboxgradient.png);
background-repeat: repeat-x;
}

input[type="radio"]
{
vertical-align: middle;
}

#OuterContainer
{
background: url(/content/images/experimental/wrapper.gif) no-repeat;
width: 990px;
height:1000px;
margin: 0 auto 0 auto;
border: 1px solid black;
}

#HeaderMain
{
background: url(/content/images/experimental/header.jpg) no-repeat;
width: 972px;
height: 128px;
margin: 0 auto 0 auto;
border: 1px solid black;
}

#SubHeaderMain
{
height: 35px;
width: 972px;
margin: 0 auto 0 auto;
/*border: 1px solid green;*/
}

#TopNavMain
{
background: url(/content/images/experimental/redslice.gif);
background-repeat: repeat-x;
width: 972;
height: 27px;
}

#MainContainer
{
overflow: hidden;
min-height: 839px;
background-color: #fff;
width: 972px;
margin: 0 auto 0 auto;
overflow: hidden;
/*border: 1px solid red;*/
padding-bottom: 30px;
}

#MainContent
{
background: url(/content/images/experimental/main.jpg) no-repeat;
width: 972px;
height: 301px;
margin: 0px auto 0px auto;
/*border: 1px solid green;*/
}

#FooterLine
{
background: url(/content/images/site/footerLine.gif);
background-repeat: repeat-x;
}
#FooterEnd
{
background: url(/content/images/site/footer.gif) no-repeat;
width: 990px;
height: 30px;
position: relative;
margin: -30px auto 0 auto;
clear:both;
}

#FooterMain
{
height: 71px;
background-color: #C6BFAF;
}

#main {padding-bottom: 30px;}

#LefNavMain
{
float: left;
width: 175px;
margin-right: 8px;
height: 1100px;
border: 1px solid green;
}

#ProductMainContent
{
float:left;
width:625px;
margin-right: 8px;
height:344px;
border: 1px solid green;
}

#ProductRightNav
{
float: right;
height: 434px;
width: 145px;
margin: 0px 0px 10px 0px;
padding-bottom: 1px;
margin-top: -1px;
border: 1px solid green;
}

#ProductSubAreaMain
{
width: 625px;
height: 88px;
margin: 0px 10px 0px 0px;
float: left;
border: 1px solid green;
}

#tabs
{
display: inline-block;
}

#tabs li a
{
float: left;
display: inline;
vertical-align: bottom;
}

#tabs li
{
float: left;
display: inline;
vertical-align: bottom;
}

/* end horizontal alignment */

#TabsMain
{
background: url(/content/images/product/sides.gif);
background-repeat: repeat-y;
width: 782px;
float:left;
}

#TabsMainBottom
{
background: url(/content/images/product/bottom.gif) no-repeat;
height: 24px;
width: 782px;
float: left;
}

#ButtonCrossSellMain
{
width: 775px;
float: left;
height: 178px;
}