[Help Needed] CSS - Extra pixels below footer need removing

**Paxjah** · 10-19-2009, 02:27 PM

I am not a newbie, but I am frustrated with what could possibly be a very simple problem, and I cannot seem to solve it.

I have 25 pixels of extra space below my footer that should not exist.

I want my #footer to stay at the bottom, my #containerr to stretch the height of the page but I also want #bkg to remain outside the #container and stay static at the top.

The reason it is adding 25 pixels is definately because of #bkg ( height: 25px; ) and with my container height 100%, it adds the extra 25 pixels to that and shoves it below footer.

There must be a way to get rid of it.

I have attached my code below. Please if anyone can help, or even point me in the right direction, I will very much appreciate it. Thankyou

HTML:

Code:

<body>

<div id="bkg">

	<div id="top"></div>

</div>

<div id="container">

	<div id="header"></div>
    
    <div id="menu"></div>
    
    <div id="wrapper">
    
    	<div id="line"></div>
    
    	<div id="content"></div>
        
	</div>
    
    <div id="footer"></div>
    
</div>

</body>

CSS:

Code:

html, body {
	background: #464646;
	margin: 0;
	padding: 0;
	height: 100%;
}

#bkg {
	background: #383838;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 25px;
}

#top {
	background: #CCC url(../images/halloween/bkg_top.png) no-repeat;
	margin: 0 auto;
	padding: 0;
	width: 814px;
	height: 25px;
}

#container {
	background: #6FF url(../images/halloween/bkg_container.png) repeat-y;
	margin: 0 auto;
	padding: 0;
	width: 814px; /* -14px for left and right padding */
	height: 100%;
}

#header {
	background: #FF6;
	margin: 0 0 0 7px;
	padding: 0;
	width: 800px;
	height: 75px;
}

#menu {
	background: #06F url(../images/halloween/bkg_menu.png) repeat-x bottom;
	margin: 0 0 0 7px;
	padding: 0 0 4px 0;
	width: 800px;
	height: 33px; /* -4px for bottom padding */
}

#wrapper {
	background: #F6C;
	margin: 0 0 0 7px;
	padding: 0;
	width: 800px;
	height: auto;
}

#line {
	margin: 0;
	padding: 0;
	width: 800px;
	height: 4px;
}

#title {
	background: #C00;
	margin: 0;
	padding: 12px 0 12px 0;
	width: 800px;
	height: 16px; /* -24px for top and bottom padding */
	text-align: center;
}

#content {
	background: #33C;
	margin: 0;
	padding: 0 20px 0 20px;
	width: 760px; /* -40px for left and right padding */
	height: auto;
}

#footer {
	background: #60F url(../images/halloween/bkg_footer.png) no-repeat;
	margin: 0 0 0 7px;
	padding: 0;
	width: 800px;
	height: 88px;
	bottom: 0;
	position: absolute;
}

**debtboy** · 10-19-2009, 03:32 PM

What is the actual height dimension of bkg_footer.png is it around 63px??

**Paxjah** · 10-19-2009, 03:37 PM

Originally Posted by debtboy

What is the actual height dimension of bkg_footer.png is it around 63px??

No, it is 88px exactly

**debtboy** · 10-19-2009, 03:49 PM

why is your footer absolute??

**Paxjah** · 10-19-2009, 03:54 PM

Originally Posted by debtboy

why is your footer absolute??

To have it stay at the bottom of the page, only problem is there seems to be something non-existent with a height of 25 pixels pushing it up and making a space which should not be there.

**debtboy** · 10-19-2009, 04:22 PM

what happens when you use
margin-bottom: 88px;
under #content??

**Paxjah** · 10-20-2009, 04:02 AM

Originally Posted by debtboy

what happens when you use
margin-bottom: 88px;
under #content??

Sorry for the later reply!

Nothing happens at all, the look stays the same

**amrosama** · 10-20-2009, 04:52 AM

do you have a link for the actual page or an HTML file?

try removing the "height: 100%;"
sometimes height/width attributes act funny on IE

**Paxjah** · 10-20-2009, 05:05 AM

Originally Posted by amrosama

do you have a link for the actual page or an HTML file?

try removing the "height: 100%;"
sometimes height/width attributes act funny on IE

I've tried this to no avail. I know what my problem is, I want my #footer to stay at the bottom, my #containerr to stretch the height of the page but I also want #bkg to remain outside the #container and stay static at the top.

The reason it is adding 25 pixels is definately because of #bkg ( height: 25px; ) and with my container height 100%, it adds the extra 25 pixels to that and shoves it below footer.

There must be a way to get rid of it.