asked on

Unwanted space accumalating down the bottom of the page.

Hello all,

I have been using float and minus top values to have items over lap each other on my page, as a result I now have an accumalation of empty space at the bottom of the page, how do I get rid of it?

Thanks in advance.

FDMilwaukee

place all of your content in a "wrapper" div and give in apply a style {position:absolute; bottom:0px; margin-top:-400px} or whatever you need to get rid of it.

FDMilwaukee

do you have a live example you can post a link to...could give a more precise answer that way.

LZ1

Please post a live link.

codevomit

ASKER

I am not authorised to post a live link I'm afraid, all I can offer is a piece of code and an image.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<link rel="stylesheet" href="css/system.css" type="text/css" />
<link rel="stylesheet" href="css/general.css" type="text/css" />
<link rel="stylesheet" href="css/template.css" type="text/css" />
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/pngfix.js"></script>
<![endif]-->
<style type="text/css">
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
}
body {	
	background: #6D6E72;
	margin: 0;
        padding: 0;
}
body, html {
	width: 100%;
	min-height: 100%;
}
a:link {
	color: #59186C;
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
	color: #59186C;
}
a:hover {
	text-decoration: none;
	color: #59186C;
}
a:active {
	text-decoration: underline;
	color: #59186C;
}
#body_wrap {
	width: 100%;
	min-height: 100%;
}
#content_wrap {
	width: 905px;
	margin: auto;
	min-height: 100%;
}
#header {
	width: 100%;
	height: 175px;
}
#logo {
	float: left;
    	position: relative;
    	height: 165px;
	width: 459px;
	background: url(images/logo-01.png) no-repeat bottom right;
    	cursor: pointer;
}
#mysitebody {
	background:url(images/grunge-back.png) repeat-y center top;
	background-color:#1A171B;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
#bottom_buttons
{
        width: 100%;
        text-align: center;
        background-color: #FF0000;
        font-size: 10px;
        padding: 0 0 10px 0;
        clear: both;
}
#login {
 	position:relative;
    top:40;
	float: right;
	height: 90px;
	width: 400px; 
	background: url(images/login_back-01.jpg) right bottom no-repeat;
}
#login #area {
	position:absolute;
	float: right;
	width: 280px;
	height: 30px;
	right: 27px;
	top: 45px;
	overflow: hidden;
        text-align: center;
}
#login #area .cd_moduletitle_logo, #login #area .cd_login-logout-greeting {
        text-align: center;
        font-size: 16px;
        color: #FFF;
}
#head-space {
	float: right;
	height: 60px;
	width: 600px;
}
#menu {
	float: right;
	height: 31px;
	/*width: 600px;*/
	text-align: right;
        position: relative;
        z-index: 100;
}
#content-area {
	float:left;
	top:-195px;
	position: relative;
	left:0px;
	width: 100%;
	z-index:100;
}
#member-stats {
	width: 100%;
}
#content-fixer{
	position:relative;
	margin-bottom:0px
}
#content-topbrush{
	position: relative;
	top: 0px;
	left: -23px;
	width: 218px;
	height: 217px;
	background: url(images/top_content_brush.png) no-repeat;
	z-index: 1;
}
#content-topgrad{
	position: relative;
	top: 19px;
	left: 17px;
	width: 917px;
	height: 10px;
	background: url(images/top_grad.png) no-repeat;
	z-index: 1;
}
#content-sidegrad{
	position: relative;
	top: 19px;
	left: 17px;
	width: 10px;
	height: 315px;
	background: url(images/side_grad.png) no-repeat;
	z-index: 1;
}
#content-top{
	top: 0px;
	left: 0px;
	height: 21px;
	width: 905px;
	background: url(images/content-top-01.jpg) bottom right no-repeat;
	z-index: 100
}
#content-bottombrush {
    top: -176px;
    position: relative;
    left: 710px;//increase this value until u get what u want
    width: 218px;
    height: 217px;
    background: url(images/bottom_content_brush.png) no-repeat;
    z-index: -1;
}
#content-mid {
	top: 0px;
	left: 0px;
	background: url(images/content-mid-01.jpg) right repeat-y;
	padding: 0 20px 0 20px;
	z-index: 100;
}
#content-btm {
	top: 0px;
	left: 0px;
	height: 21px;
	width: 905px;
	background: url(images/content-bottom-01.jpg) top right no-repeat;
	z-index: 100
}
p {
	margin: 0;
	padding: 3px 0;
}
#menu ul li {
	list-style: none;
}
#menu ul li a {
	float: right;
	width: 104px;
	height: 28px;
	padding: 5px 4px 0 0;
	text-align: center;
	color: #FFF;
	background: url(images/menu_back.png) no-repeat;
	margin: 0 5px 0 0;
	font-size: 14px;
        font-weight: normal;
}
#menu ul {
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 3px 0;
	color: #59186C;
}
#member-stats #stats1 {
	width: 205px;
	float: left;
	padding: 10px;
        color: #FFF;
}
#member-stats #stats2 {
	width: 205px;
	float: left;
	padding: 10px;
        color: #FFF;
}
#member-stats #stats3 {
	width: 205px;
	float: left;
	padding: 10px;
        color: #FFF;
}
#member-stats #stats4 {
	width: 205px;
	float: left;
	padding: 10px;
        color: #FFF;
}
#member-stats #stats1 p, #member-stats #stats2 p, #member-stats #stats3 p, #member-stats #stats4 p {
color: #FFF;
}
#member-stats #stats1 a, #member-stats #stats2 a, #member-stats #stats3 a, #member-stats #stats4 a {
color: #FFF;
}
#stats1 .contentheading, #stats2 .contentheading, #stats3 .contentheading, #stats4 .contentheading {
	width: 185px;
	height: 35px;
	background: url(images/h1-back.png) no-repeat;
	font-size: 16px;
	padding: 10px 0 0 10px;
	color: #FFF;
	margin: 0;
}
#stats1 h1, #stats2 h1, #stats3 h1, #stats4 h1 {
	width: 185px;
	height: 32px;
	background: url(images/h1-back.png) no-repeat;
	font-size: 14px;
	padding: 13px 0 0 10px;
	color: #FFF;
	margin: 0;
}
img {border: 0 none;}

#menu a:link {
	color: #FFF;
	text-decoration: none;
}
#menu a:visited {
	text-decoration: none;
	color: #FFF;
}
#menu a:hover {
	text-decoration: none;
	color: #6D6E72;
}
#menu a:active {
	text-decoration: none;
	color: #6D6E72;
}
h1 {
font-size: 18px;
}
#footer {
        width: 100%;
        text-align: center;
        color: #FFF;
        font-size: 10px;
        padding: 0 0 10px 0;
        clear: both;
}
#footer a:link {
	color: #FFF;
	text-decoration: none;
}
#footer a:visited {
	text-decoration: none;
	color: #FFF;
}
#footer a:hover {
	text-decoration: underline;
	color: #FFF;
}
#footer a:active {
	text-decoration: underline;
	color: #FFF;
}
#login2 {
	position: relative;
	top: 40px;
	float: right;
	height: 40px;
	width: 285px;
	background: url(images/login.gif) right bottom no-repeat;
}
#login2-#area {
	position:absolute;
	right:0;
	float: right;
	width: 140px;
	height: 30px;
	right: 10px;
	top: 40px;
	overflow: hidden;
}
#login2-#area2 {
	position: absolute;
	right:0;
	float: right;
	width: 140px;
	height: 30px;
	right: 12px;
	top: 40px;
	overflow: hidden;
}

#login2 #area .cd_moduletitle_logo, #login2 #area .cd_login-logout-greeting {
        text-align: center;
        font-size: 16px;
        color: #FFF;
        margin: 5px 0 0 0;
}
#login2 #area2 .register_top {
        text-align: center;
        font-size: 16px;
        color: #FFF;
        text-decoration: none;
        margin: 5px 0 0 0;
}
#login2 #area2 .register_top a {
        text-align: center;
        font-size: 16px;
        color: #FFF;
        text-decoration: none;
        margin: 5px 0 0 0;
}
.videocomments ul {
        margin: 0;
        padding: 0;
}
.videocomments ul li {
        list-style: none;
        border-bottom: 1px solid #CCC;
}
.videocomments ul li div img {
        padding: 2px;
        border: 1px solid #CCC;
}
</style>
</head>

<body>

	<div id="mysitebody">
		<div id="content_wrap">
			<div id="header">
			  <div id="logo" onclick="window.location.href='<?php echo $this->baseurl ;?>'"></div>

				<div id="login2">
					<div id="area2">
  						<jdoc:include type="modules" name="top2" style="none" />
					</div>
				<div id="area">
  					<jdoc:include type="modules" name="top3" style="none" />
				</div>
			</div>

<div id="head-space">&nbsp;</div>
<div id="menu" style="width: 905px;">
   <jdoc:include type="modules" name="menu" style="none" />
</div>
</div>
  <div id="content-topbrush">
    <div id="content-topgrad"></div>
    <div id="content-sidegrad"></div>
  </div>
  <div id="content-area">
	<div id="content-top"></div>
	<div id="content-mid">
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
	</div>
	<div id="content-btm">
	  <div id="content-bottombrush"></div>
	</div>
</div>
<div id="bottom_buttons"></div>
<div id="footer">
<jdoc:include type="modules" name="user5" style="none" />
</div>
</div>
</div>
<jdoc:include type="modules" name="stats" style="none" />
</body>
</html>

Open in new window

UNWANTED.png

ASKER CERTIFIED SOLUTION

FDMilwaukee

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

codevomit

ASKER

Thanks FDMilwaukee, that has helped a bit, but I now seem to have an ominouse grey patch now, and have just noticed a masive horizontal scroll bar appearing.
UNWANTED.png

FDMilwaukee

are you using Firefox, and do you have the developers tool bar? If you don't, and you're not please get them now (it will change your web deisgn life)

Firefox: http://www.mozilla.com/en-US/firefox/upgrade.html

developers tool bar: https://addons.mozilla.org/en-US/firefox/addon/60

if you are using is it "display element information", click on the grey area to determine what div that is, then chage the background-color to black, and you should be good to go.

FDM

FDMilwaukee

oh regarding the scroll bar...that must be the grey bar as well so do one of two things....either give it a set width, or apply style {overflow:hidden)

I'm guessing the grey is your body element

FDMilwaukee

or possibly even html element

codevomit

ASKER

Thanks for your help FDMilwaukee, the margin-bottom:-200px; did the trick. As for the grey, it was caused by me using left to position an element to the right instead of using the correct way of float:right, sat through recoding it by hand to find the exact point of faliure.

codevomit

ASKER

Simple and correct.