CSS - Footer Over Content

Is it possible to get my content to stick to my footer? I have a sticky footer at the bottom of my page and I would like the content to always bee 100% of the page and sitting right on top of the footer.

I been messing around with different things for hours and nothing I seem to do will get my content box to stay stuck to the footer at the bottom of my page.

Here is a link to the site printing.ou.edu/new-index.html

This is what I am trying to get printing.ou.edu/Draft3.png

Thanks for your help :-)

(EDIT)
I have Solved this problem sadly I had to use Java Script to get it done but it works.


Here is the Java Script for anyone else trying to do something like this.

Code:

<script type="text/javascript">
window.onload = function() {
  contentHeight();
}
window.onresize = function() {
  contentHeight();
}

function contentHeight() {
	if (document.getElementById) {
		var windowHeight = getWindowHeight();
		var headerHeight = document.getElementById('header').offsetHeight;
		var footerHeight = document.getElementById('footer').offsetHeight;
		var pushHeight = document.getElementById('push').offsetHeight;
		var menuHeight = document.getElementById('menu').offsetHeight;
		var contentElement = document.getElementById('content');
		var contentbgElement = document.getElementById('content-bg');
		contentElement.style.height = (windowHeight - (headerHeight + footerHeight + pushHeight + menuHeight)) + 'px';
		contentbgElement.style.height = (windowHeight - (headerHeight + footerHeight + pushHeight + menuHeight)) + 'px';
	}
}

function getWindowHeight() {
	var windowHeight = 0;
	if (typeof(window.innerHeight) == 'number') {
		windowHeight=window.innerHeight;
	}
	else {
		if (document.documentElement && document.documentElement.clientHeight) {
			windowHeight=document.documentElement.clientHeight  ;
		}
		else {
			if (document.body && document.body.clientHeight) {
				windowHeight=document.body.clientHeight;
			}
		}
	}
	return windowHeight;
}
</script>

See you all around

Here's how the footer looks now:



And here's the desired result:



Any ideas? It'll have to be cross-browser friendly (even IE6, god help me).

Thanks!

I have a container div which includes a #header div, a left-floated #content div, a #right div, and a #footer div. The #content div has a background image that does not want to extend all the way down within the div to snuggly join the footer in any IE browser. I've tried the Holly hack, adding a line-height, relative positioning but to no avail. The stylesheet is embedded in the html file. Here's the link:

http://www.emaycreations.net/BuildWebsiteIII/Week6/finalexamPractice.html

It looks great in NN, FF and Opera but neither IE 5 nor 6 displays the page correctly. Can anyone help?

Mari-Anne in Montana

Hi

I'm having a bit of trouble with a DIV/CSS layout - 2 DIVs are inside a 100% height 100% width container DIV. The first (top) DIV is the content and the second (bottom) DIV being a 100% width 240px height footer DIV.

I can make the footer stick to the bottom of the page and display fine no problem, however, I am having trouble getting the content div to fill only the area above the footer. If I specify a 100% height for it then it extends the entire height of the page and content disappears behind the footer. Plus, I want to absolutely center the content in the space above the footer, not the absolute center of the whole page, which is all i am acheiving with 100% height!

Basically, I need the content DIV to extend 100% then subtract the 240px height of the footer - I suspect it's not wise to mix px and %, however.

I have attached an image to help with my probably confusing explanation!

I do have a workaround using tables, which I would ideally like to avoid, particularly as it does not support IE6/7 browsers.

If a solution can be acheived which uses JavaScript to format the DIVs, then I am open to any suggestions anyone may have.

Thanks
R

I'm trying to use CSS to create a layout that has a top header, followed by a left side navbar, a center content area, and a bottom footer. I'm totally lost by the CSS needed to make this happen. Here's what I'm trying. It's borrowed from other posts that came up by searching for headers and footer. Any help would be fantastic. I'm trying to end my use of frames for the header and navbar. Thanks in advance for any help.

Code:

 #header {
        
        left: 0;
        width: 100%;
        height:125px;
        top: 0;
     	background-image: url(images/topbackground2.jpg);
        background-repeat: repeat;

}

#navbar{
		width:122px;
		height:100%;
		background-color:#3f79a1;
		position: absolute;
               top: 125px;
               left: 0px;}

#footer{
           background-image: url(images/gradientsmaller2.gif);
          font: 10pt;
          position: absolute;
          bottom: 0;
          left:0;
          background-color: #ccffcc;
          width: 100%; 
          text-align: center;
          padding: 0 15%;

}

I have created a CSS site that has a footer spanning the bottom of the viewport and whilst I have managed to glue it to the bottom I have another div that is behind it even though I think I have set-up the container
properly.

The troublesome page is http://www.cimbian.co.uk/BognorArchers/recurve.htm
and you will see that the bottom of the text in the main pane is obscured by the footer.

Basically I have a meta-wrapper for the whole page: and then have the main content within it. Following on from the content I have the footer and then I close the meta-wrapper. Something like this:

<div id="meta_wrapper">
<div id="BA_main_content_area" class="clearfix">
<div id="BA_Main_Full_Width">
</div>
<div id="footer">
</div>
</div>

My CSS for this is:

div#meta_wrapper { width: 760px;
margin-left: auto; margin-right: auto;
background-color: yellowgreen;
text-align: left;
position: relative;
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit; }

html>body #meta_wrapper { height: auto; }

div#BA_main_content_area {width:760px;
align: center;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;

margin-left: 0;
font-size: 0.85em }

div#BA_Main_Full_Width { border:3px inset yellow;
font-family: Verdana; font-size: 0.85em;
text-align: justify;
position: relative;
width: 500px;
margin: 10px 30px 0px 10px;
padding: 3px;
background-color: #FFFFCC;
float: left; }

div#footer { position: absolute;
bottom: 0;
width:760px;
padding:4px 0;
font-size: 0.6em;
text-align: center;
background-color: white; /* Blue */
border-top:1px solid yellow; border-bottom:2px solid
yellow; margin-top:1.5em;} /* orange border */

The problem occurs in IE and in Netscape so although I have box-model problems due to IE in Firefox the problem is not limited to IE.

As far as I can tell from much web-reading and a couple of books this should
do it.

Any thoughts?

PS: I also posted this in the MS FP forum as I built the page in FP but have not yet found a solution so please don't yell if you have seen the post there too ;-)

Hello,

I just joined the forum, I'm new to web design although I have some experience in video post production.

I'm attempting to create a layout for a website using sticky footer technique and an image for the border shadow in the main column.
The sticky footer works well until I tweak the css to add the background border image, then I get this empty space in the middle of the body where the border image background should be extending to.

It's probably a novice mistake but I can't get to find it. Your help would be much appreciated.
The HTML:

Code:

<body>

<div id="nonFooter">
		<div id="wrapShadow">
		<div id="header">
				<div id="linksHead"></div>
		<div id="mainMenu"></div>
		</div>		
			
		
		<div id="content">
<div id="bannerSlider">  (SWF file)
</div>
			<div id="contentBuscador">
			</div>
			<div id="contentTours">
			</div>
			<div id="contentElite">
			</div>
			<div id="contentTestimonios">
			</div>
			<div id="contentPromos">
			</div>
		</div>
	</div>
</div>
	<div id="footer">
		<div id="wrapShadowFooter">
		</div>
		</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
	</script>
</body>

The CSS:
Code:

html,body {
	padding: 0;
	margin: 0;
}

html
{
height: 100%;
}

body
{
height: 100%;
background-color: #3399cc;
}

#nonFooter
{
	position: relative;
	min-height: 100%;
	background-image: url(_images/shadow920x1ver3.gif);
	width: 920px;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

* html #nonFooter
{
	height: 100%;
}

#content
{
	padding-bottom: 7em;
	width: 900px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	clear: both;
	border-top-width: medium;
	border-top-style: solid;
	border-top-color: #336;
}
#header {
	width: 900px;
	height: 100px;
	position: relative;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
}
#footer
{
	position: relative;
	margin-top: -6em;
	height: auto;
	background-image: url(_images/shadow920x1ver3.gif);
	width: 920px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
} 
#wrapShadow {
	width: 920px;
	margin: 0px;
	padding: 0px;
	height: auto;
}
#wrapShadowFooter {
	width: 900px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding: 0px;
	background-image: url(_images/footerCruiseship.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 100px;
}

All #content(area) Divs in content have the same code as this:
#contentBuscador {
	float: left;
	height: 100px;
	width: 880px;
	padding: 0px;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 10px;
}

Thank you,
pixelMason.

Edit: Problem Solved thanks to f_nietzsche

I want to do this design:
http://hermann.sonyextreme.com/upload/design.png
* means it should be "the rest". Just like when working with frames. So the sites height is 100% and width is 800px.

I've set it up like this:
Code:

<div id="container">
  <div id="header">
  </div>
  <div id="main">
    <div id="menu">
    </div>
    <div id="content">
    </div>
  </div>
  <div id="footer">
  </div>
</div>

But no matter what I try, the css just keeps ****ing with me
So do you have any tricks/know any sites who have done this succesfully... or just anything to help me, then I'd love to hear from you

Thanks in advance
Hermann

I actually have two problems...

Installing hte firebug plugin for firefox may ease helping me out...

The problem is with http:// kthxbai2u<dot>com

I cant for the life of me center the "content" div. I have tried every method I found on the first 4 pages of Google. The only thing I can think of is that it is inheriting something wierd or I am missing something simple...

The second problem, I can't seem to make the left and right side bar expand to meet up with the footer wayy down at the bottom of the page. I want that div to make a column the whole way down.

If anyone can help me out, it would be more than appreciated!

Thanks

Hi Guys,

I'm trying to create a footer for a web page. The content displayed will change dynamically from article to article that is posted.

The footer is a simple div that has centered text stating "page posted by $membername on $date"

What I want is if the article is not long enough to push the footer all the way to the bottom, that it would be fixed to the bottom of the screen (not the page).

Is this possible? For instance, someone posts an article that is long enough that you would need to scroll down to see the entire page. The footer would be ok being placed just after the article. But if the article is very short, just like 1 paragraph.. the footer would show halfway up the page.

Ideas?