Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Keep Footer to the Bottom of the Screen

Status
Not open for further replies.
techlounge

techlounge

Technical User
Aug 21, 2010
20
GB
Hey all,

Hopefully I'm on the right track and someone with the right know-how will be able to easily show me what I need to add to my code.

I'm posting a very basic page layout that I'm hoping to use as a template in future. I want to keep the drop-shadow around the main container and have the Footer at the bottom of the screen if there isn't enough content to push it down but if there is, the footer will expand to include more content in the Content DIV.

Hope you can help without me having to re-do it again :)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" />
body {
	background-color: #FF9;
}

* { 
	margin: 0;
	padding: 0;
}

#container {
	background-color: #9F6;
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	-moz-box-shadow: 0 0 30px 5px #999;
	-webkit-box-shadow: 0 0 30px 5px #999;
}
#header {
	background-color: #060;
	height: 220px;
}

#footer {
	background-color: #060;
	height: 150px;
}
#content {
	background-color: #CCC;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="container">
  <div id="header">Header</div>
<div id="content">
  <p>Content</p>
</div>
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>

Thanks in advance
 
Sort by date Sort by votes
Thanks Darryn, do you know how many types of wheels there are in the world? To many for me to bother trying to count! I'm not trying to reinvent anything just trying to get some help with the code I've got as I don't want a Header and Footer that stretch the whole screen and when I try and mess with other peoples code to try and get it to fit into my design it doesn't work.

I have the structure how I need it to be APART from getting the Footer to be 'Sticky'

So can anyone help me adapt my code so that the Footer is Sticky?
I'll keep trying and keep checking back..
 
Upvote 0 Downvote
You don't have that much code to really adapt from what you put up, besides you can just put your code within the structure that Ryan set up.

I've used this many times and it works great.

I can tell you that fundamentally with how you are structuring your site you will get to where you want with adding extra divs (maybe). The footer should NOT be a part of the content div and should be treated as a standalone entity.

With how you are laying out your page I think that JS would be your best bet to calculate the height of the document and then generate your CSS for the footer. Not very intuitive or easy to accomplish.

If you just move your footer outside your wrapper container you have the structure in the link I provided you with, I don't see what's hard to adapt it from there. Shouldn't take more than 5 minutes.

Darryn Cooke
| Marketing and Creative Services
 
Upvote 0 Downvote
Ok still trying to get this working.

I moved the Footer DIV outside of the Wrapper DIV but it's still not working right...can you see what's wrong with it?

Thanks


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" />

html, body {
height: 100%;
background-color: #fff;
}
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 1000px;
margin: auto;
min-height: 100%;
}
#container {
background-color: #9F6;
width: 950px;
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
padding-bottom:150px;
margin:auto;

}
#header {
background-color: #060;
height: 220px;
}
#content {
background-color: #CCC;
}
#footer {
position: relative;
background-color: #060;
height: 150px;
width:950px;
margin-top: -150px;
clear:both;
margin:auto;
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">Header</div>
<div id="content">
</div>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
 
Upvote 0 Downvote
The footer appears at the foot of the screen for me using IE8 but may not work with all flavours of browser.

Why not just ensure you have enough content on each page to sufficiently fill the page body.

Keith
 
Upvote 0 Downvote
Code: 
#wrapper {
min-height: 100%;
}
#container {
overflow:auto;padding-bottom: 150px;}  /* must be same height as the footer */

}

#header {
background-color: #060;
height: 220px;
}

#mainContent {
background-color: #9F6;
width: 950px;
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
padding-bottom:150px;
margin:auto;

}
#content {
background-color: #CCC;
}

#footer {
position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 180px;
	clear:both;} 

#footCont {
position: relative;
background-color: #060;
width:950px;
margin:auto;
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="mainContent">
<div id="header">Header</div>
<div id="content">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footCont"></div>

</div>
</body>
</html>

In a bit of a rush, but that should work. Essentially you need the 3 elements (WRAPPER, CONTENT HOLDER -> which is nested in WRAPPER, and FOOTER -> which is outside the WRAPPER), and to obey the padding rules. from there you just create your site as you want within each element. I do think that my #mainContent is probably not needed and those styles can be applied to #container but I'm about to head out so this was a pretty rough attempt. I have not browser tested it, but the code looks like it *should* work. [sub]Or at least come close...[/sub]

Darryn Cooke
| Marketing and Creative Services
 
Upvote 0 Downvote
Hey audiopro,

I can only see it in IE9 & Chrome (latest) and I have to scroll down the page because the footer goes off the screen and the mid-section is a bit messed up.

Having enough content would certainly negate the need for a sticky footer :) the idea though is to use this as a template in Dreamweaver and then after applying different designs, use those as Wordpress themes.
 
Upvote 0 Downvote
Hey Darryn, the code you posted didn't work so well but I have continued working at it and I've made progress!

I've separated the CSS from the HTML. This sorts out the sticky & fixed width but the CSS for the drop-shadow makes it go along the top of the footer so I need to find another solution...

HTML
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Draft-Template-v2.2</title>
<link href="expanding.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="outer">
    <div id="header"></div>
  <div id="main_content"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>

CSS
Code: 
@charset "utf-8";
/* CSS Document */
* {/* for demo only*/
    margin:0;
    padding:0
}
html, body {
    height:100%;/* needed to base 100% height on something known*/
    text-align:center;
}
body {
	overflow-y: scroll;
	background-color: #DADADA;
}
#outer {
	border-left: 1px solid #0e4700;
	border-right: 1px solid #0e4700;
	width: 1000px;
	margin:auto;
	min-height:100%;
	margin-top:-123px;/*footer height - this drags the outer 40px up through the top of the monitor */
	text-align:left;
	-moz-box-shadow: 0 0 20px 0 #999;
	-webkit-box-shadow: 0 0 20px 0 #999;
	background-color: #FFF;
}

* html #outer {
    height:100%
}
#header {
	border-top:123px solid #fff; /* soak up negative margin and allows header to start at top of page*/
	height:200px;
	background-color: #060;
	width:100%;
}
#main_content{
	width:100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #FFF;
}

#footer {/* footer now sits at bottom of window*/
	height: 123px;
	background-repeat: no-repeat;
	width:1000px;
	margin:auto;
	border-left: 1px solid #0e4700;
	border-right: 1px solid #0e4700;
	clear:both;
	background-color: #060;
	-moz-box-shadow: 0 0 30px 5px #999;
	-webkit-box-shadow: 0 0 30px 5px #999;
}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

ControlNovice
  • Locked
  • Question
Any plans to add AppSheet programming to this list?
Replies
0
Views
213
ControlNovice
ControlNovice
tyutghf
  • Locked
  • Question
Vertical height of homepage ideals
Replies
5
Views
285
cadel
cadel
rk0000
  • Locked
  • Question
Wordpress: Unable to view icons next to “Hide Controls” in admin customize.php
Replies
0
Views
172
rk0000
rk0000
tyutghf
  • Locked
  • Question
Chat to current website visitors together
Replies
1
Views
215
antanasdeg
antanasdeg
ycubed10
  • Locked
  • Question
Faulty web tool: Bloconomics
Replies
0
Views
182
ycubed10
ycubed10

Part and Inventory Search

Sponsor

Back
Top