Position: relative Creating Gap at Bottom of Layout

[martinsandhu]

the div#rightColNoneHome is position: relative with a value top:-105px.

This obvisuly creates a gap at the bottom of this div of 105px which creates a large white space between the content and the footer. I was wondering if anybody could advise how to get around this problem?


Thanks.

http://www.creativebubbles.co.uk/ukwsl/services.html

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	color: #000;
	background-color: #fff;
	margin: 0;
	padding: 0;
	text-align:center;
}

img {
border:none;
margin:0;
padding:0;
}

strong {color:#0c7e0c; font-weight:bold;}
h1 {font:1.2em Arial, Helvetica, sans-serif; color:#0c7e0c; font-weight:bold; margin:8px 0 5px 0; padding:0;}
h2 {font:1.4em Arial, Helvetica, sans-serif; color:#0c7e0c; font-weight:bold; margin:8px 0 5px 0; padding:0;}
p {font:1em Arial, Helvetica, sans-serif; margin:8px 0 8px 0;}

	
#maincontainer {
margin: 0px auto;
text-align: left;
width: 911px;
background:#fff;

}

a {color:#0c7e0c; text-decoration:underline;}
a:hover {color:#9ed98b; text-decoration:underline;}

#header {width:911px; float:left;}

#logo {width:300px;float:left; padding: 0 330px 0 0;}

#quickLinks {padding:0 0 0 300px;}
#quickLinks ul { margin: 55px 0 0 0px; list-style:none;}
#quickLinks li { float:left; padding: 0 18px 0 0px; font:1.0em Arial, Helvetica, sans-serif; }
#quickLinks a {color:#0c7e0c; text-decoration:none;}
#quickLinks a:hover {color:#9ed98b; text-decoration:none;}


#navigationBackground {width:911px; margin:0; padding:0;}
#leftBanner {width:618px; float:left; margin:0; padding:0;}
#rightBanner {float:right; margin:0; padding:0; background:url('../images/home/banner-section-2.gif') no-repeat; height:332px; width:293px;}

#home-image {float:left; background:url('../images/home/banner-section-1.gif') no-repeat; margin:0; padding:0; width:618px; height:332px;}
#menu {margin:0 0 0 0px; padding:305px 0 0px 0; width:618px; float:left; }
#menu ul {list-style:none; padding:0 0 0 5px; margin:0;}
#menu li {float:left; margin:0 0px 0 0; padding:0 15px 0 15px; }
.border { border-left:dotted 1px #fff;}
#menu a { font:1.0em Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:none; font-weight:bold;}
#menu a:hover{ font:1.0em Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:underline; font-weight:bold;}


#bottom {float:left; width:911px; margin:0; padding:0;}

#content {width:615px; float:left; padding:10px 0 10px 0; margin:0;}

#leftContent {width:285px; float:left; text-align:justify;}
#split {float:left; width:10px; padding:0 0 0 10px;}
#rightContent {width:295px; float:right; text-align:justify; padding:0 10px 0 10px; border-left:dotted 1px #999999;}

#rightCol {position:relative; width:290px; margin:-75px 0 0 0; overflow:hidden; top:0; left:615px;}
*html div#rightCol {position:relative; width:290px; margin:-75px 0 0 0; overflow:hidden; top:0; left:0px;}

#rightColNoneHome {position:relative; width:290px; margin:0px 0 0 0; overflow:hidden; top:-105px; left:2px;}
*html div#rightColNoneHome {position:relative; width:290px; margin:0px 0 0 0; overflow:hidden; top:-125px; left:2px;}

#newsheader {margin:10px 0 0 0; padding:0;}

#footer {float:left; border-top: 3px solid #7fbb7f; width:911px; padding:5px 0 0 0;}

#copyright {float:left; width:300px; font:0.9em Arial, Helvetica, sans-serif; color:#949494; padding:0 320px 0 0;}

#tools a { color:#949494; text-decoration:none;}
#tools a:hover {color:#333333; text-decoration:none;}
#tools ul {list-style:none; margin:0 0 0 0px; font:0.9em Arial, Helvetica, sans-serif;  }
#tools li {float:left; padding:0 0px 0px 10px;}

#news {background:url('../images/site/newsroom-background.gif') no-repeat; padding:5px 0px 2px 5px; width:283px; height:229px; margin:0;}
#news a {color:#FFFFFF; text-decoration:none; font-weight:bold;}
#news a:hover {color:#FFFFFF; text-decoration:underline; font-weight:bold;}

.newsStory {margin:0 0 10px 0;}

.newsHeadline {font:1.1em Arial, Helvetica, sans-serif; color:#FFFFFF; font-weight:bold; margin:5px 0 5px 0;}

.newsSummary {font:1.0em Arial, Helvetica, sans-serif; color:#FFFFFF; margin:0;}

.date{font:0.8em Arial, Helvetica, sans-serif; color:#FFFFFF; font-weight:bold; margin:2px 0 0 0;}

#subNav {background:url('../images/site/sub-nav-background.gif') no-repeat; width:618px; margin:0px 0 0 78px; padding:0px 0 30px 0; font:0.9em Arial, Helvetica, sans-serif;}
#subNav ul {list-style:none; margin:0; padding:0 0 0 14px;}
#subNav li {float:left; padding:7px 10px 0 0px; margin:0;}
#subNav a { color:#fff; text-decoration:none;}
#subNav a:hover {color:#fff; text-decoration:underline;}

#maincontent {float:left; width:598px; padding:0 15px 0 0; text-align:justify; margin:0;}

[markbrown4]

position: relative leaves a footprint.
remove that and and make it margin-top:-105px;

Negative margin's drag around the blocks in a similar way but don't leave anything behind.