Content overhangs bottom of container

HTML & CSS
1

Hi,

I have an index page with a wrpper using the sliding doors technique. within that I have 2 divs called mainContent and secondaryNav.

I use php to populate the mainContent. when I put the content it overhangs the wrapper by about 10 px on each page whatever the amount of content is placed withion mainContent.

Can any one tell me how I can sort this?:injured:

It can be seen at:http://www.alphatest.co.uk

Css code is as follows:

body{
margin:0;
padding:0;
/*background:url(c2_images/corp2_back.gif) repeat-x;*/
background:#ccffff;
font-family:Arial, Helvetica, sans-serif;
}

#wrapper{
width:90%;
max-width:1100px;
margin:2% auto;
background: #ccffff; /*this used to be e5e5e5 */

}

.wrapper{
width:100%;
background-color:#cccccc;
background:url(c2_images/bigwrap_bl_shad.jpg) no-repeat left bottom;
}

.wrap_outer{background:url(c2_images/bigwrap_br_shad.jpg) no-repeat right bottom;
}

.wrap_inner{background:url(c2_images/bigwrap_tl_shad.jpg) no-repeat left top;
}


#header{
width:98%;
height:22%;
background:url(c2_images/bigwrap_tr_shad.jpg) no-repeat right top;
overflow:hidden;
padding-top:2%;
margin-left:1.9%;
margin-bottom:2%;
}

#header img{overflow:hidden;}
#logocover{float:left; }
#logohead{float:left; width:31%; margin-left:2%; padding:7px; height:22%;}
#logohead h1{color:#993333; font-family:Arial, Helvetica, sans-serif;}
#logopic{float:right; margin-right:1.3%;   }

#mainNav{
float:left;
width:16%;
background-color: #0099CC;
margin-left:4%;
margin-top:2%;
}


#mainNav li{list-style:none; color:#FFFFFF; }

#mainNav  ul{
margin:0;
padding:0;
list-style: none;
}

#mainNav ul a:link, #mainNav ul a:visited  {
display:block;
text-decoration:none;
text-indent:25px;
width:120px;
height:39px;
border:#0099cc;
line-height:39px;
color: #ffffff;
background:#0099cc; background:url(c2_images/button.gif) no-repeat left top;
}
#mainNav ul a:hover, #mainNav ul a:active  {
color: #FFFF00;
background:#0099cc; background:url(c2_images/button_over.gif) no-repeat left top;
border:#0099cc;
}


#content{
float:left;
width:76%;
background-color:#ffffff;
margin-right:4%;
margin-top:2%;
}
#content h2{color:#333333; text-align:center;}

#mainContent{
float:left;
width:59%;
background-color:#996600;
padding-top:30px;
padding-left:3%;
padding-right:3%;

}

#secondaryNav{
float:right;
margin:auto 0;
width:29%;
padding-right:1%;
background-color:#FFFFff;

}

#latestnews{
float:left;
max-height:300px;
max-width:170px;
min-width:170px;
/*margin:15px 0 0 0;
padding: 5px 0 5px 0; */

}

.latestnews{
width:100%; background:url(c2_images/sidebox_bl.gif) no-repeat left bottom;}

.ln_outer{background:url(c2_images/sidebox_br.gif) no-repeat right bottom;}

.ln_inner {
background:url(c2_images/sidebox_tl.gif) no-repeat left top; padding-left:10px;}



#latestnews h3{
background:url(c2_images/sidebox_tr.gif)  no-repeat right top; text-align:center; padding-top:13px; padding-bottom:10px; color:#993333;}
#latestnews p{width:145px;  font-size:12px; padding-left:8px; padding-right:8px; padding-bottom:15px;  color:#666666;}

#footer{
clear:both;
padding:4px;
background-color: #999999;
height:40px;
}
#footer p{font-size:10px; color:#FFFFFF; line-height:10px;}


#footer a:link, #footer a:visited  {
display:inline;
line-height:10px;
text-decoration:none;
color: #ffffff;
font-size:10px;
background:none;
}
#footer  a:hover, #footer a:active  {
display:inline;
line-height:10px;
color: #FFFF00;
font-size:10px;
background:none;
}

thanks for your help

2

Your background images include part of the blue body background, so you need to push the content up a bit to account for this.

Try adding something like this:

#content{
    margin-bottom: 20px;
}
3

thanks ralph.m It seems so simple but after doing all the divs for the sliding doors stuff i was getting truly lost.:wink: