homepage Welcome to WebmasterWorld Guest from 54.196.195.158
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Sticky Footer using tables
JanaP10




msg:4329762
 3:39 am on Jun 23, 2011 (gmt 0)


System: The following 2 messages were cut out of thread at: http://www.webmasterworld.com/css/4316729.htm [webmasterworld.com] by alt131 - 1:54 am on Jun 24, 2011 (utc +12)


I have this same post in another part of the forum as a follow-up to a DOC type declaration issue but now that I've solved the DOC type declaration issue, I thought the post belonged more in this thread as it pertains to implementing a "sticky footer" to work with my current layout. Here's the post (followed by my code).

So I rewrote my code with the proper DOC type and both the HTML and CSS validate. However, I need help with a design issue that I've been struggling with for days. I like the way the pink wrapper section stretches all the way to the bottom but somehow I have all this extra space above the header (icons and logo) and below the footer. My content is short (on all my pages) so I would also like the footer to appear at the bottom. I've tried including various "sticky footer" solutions (ones without scripts or hacks only) but I can't get anything to work with my layout. Maybe it's because I'm using tables? I am open to "dumping" the tables and using only CSS but I just don't know how to do this. If there is any of my code that can be revised because it's incorrect or deleted because it's redundant, please help. I have only tested this in FF, Opera, Chrome, and IE8. If this needs to be revised to work in IE 6 and 7, please provide me with code and exactly where to place. Although this design works in IE8, it doesn't look exactly the same as in FF and other browsers but I don't know what to change. I so appreciate the professional web designers out there who know how to write code and understand how to implement it! Thanks. My code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
a:link {color:rgb(153,0,51);}
a:visited {color:rgb(153,0,51);}
a:hover {color:rgb(153,0,51);}
a:active {color:rgb(153,0,51);}

html, body, .wrapper {
height: 100%;
margin: 0;
padding: 0;
border: none;
}

body {
margin: 0;
padding: 0;
border: 0;
background-color: rgb(255,255,255);
background-image: url(background.jpg);
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
font-size: 100%;
line-height: 1.125em;
}

h1 {
margin-top: 12px;
margin-bottom: 8px;
margin-left: 0px;
text-align: left;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 1.55em;
color: rgb(153,0,51);
}

p {
margin-top: 12px;
margin-right: 8px;
margin-left: 0px;
text-align: justify;
font-family: Tahoma, Arial, sans-serif;
font-size: 1.0em;
color: rgb(0,0,0);
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 154px;
border-bottom: 0px solid rgb(153,0,51);
}

li {
margin: 0px;
padding: 0px;
width: 152px;
border-right: 1px solid rgb(153,0,51);
line-height: 2em;
height: 2.5em;
font-family: "MS Trebuchet", Arial, sans-serif;
font-size: 100%;
}

li a {
display: block;
text-decoration: none;
background: rgb(255,222,239);
color: rgb(153,0,51);
width: 142px;
padding: 0 5px;
}

li a:hover {
background: rgb(153,0,51);
color: rgb(255,255,255);
}

.wrapper {background-color: rgb(255,222,239); margin: 20px auto; padding: 0px 30px; width: 52%; border: 1px solid rgb(153,0,51); text-align: center;}
.header {padding-top: 5px;}
.footer {font-family: Tahoma, Arial, sans-serif; font-size: 0.675em; text-align: center}
td.icons {padding-top: 15px;}
td.logo {padding-top: 15px;}

</style>
</head>
<body>
<table class="wrapper">
<tr>
<td>

<table class="header" width="96%" align="center">
<tr>
<td class="icons" align="left"><img src="image1.gif" width="88" height="88" alt="icon"> <img src="image2.gif" width="88" height="88" alt="icon"> <img src="image3.gif" width="88" height="88" alt="icon"> <img src="image4.gif" width="88" height="88" alt="icon"> <img src="image5.gif" width="88" height="88" alt="icon"></td>
<td class="logo" align="right"><img src="image.gif" width="294" height="88" alt="logo"></td>
</tr>
</table>

<br>
<table class="line" width="96%" align="center">
<tr>
<td><img src="line.jpg" width="100%" height="1" alt=""></td>
</tr>
</table>

<table class="middle" width="96%" align="center">
<tr>

<td class="navigation" width="16%" align="left">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="afterschool.htm">Menu2</a></li>
<li><a href="contact.htm">Menu3</a></li>
<li><a href="gallery.htm">Menu4</a></li>
<li><a href="girlscouts.htm">Menu5</a></li>
<li><a href="parties.htm">Menu6</a></li>
<li><a href="programs.htm">Menu7</a></li>
<li><a href="registration.htm">Menu8</a></li>
<li><a href="summer.htm">Menu9</a></li>
<li><a href="testimonials.htm">Menu10</a></li>
</ul>
</td>

<td class="empty" width="4%"><img src="spacer.gif" width="1" height="1" alt=""></td>

<td class="content" width="73%" valign="top">
<h1>Welcome</h1>

<table width="320" align="right" cellspacing="10">
<tr>
<td align="center" valign="top">
<img src="image.jpg" width="300" height="117" alt="characters" border="2">
</td>
</tr>
</table>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.</p>
</td>
</tr>
</table>

<table class="line" width="96%" align="center">
<tr>
<td><img src="line.jpg" width="100%" height="1" alt=""></td>
</tr>
</table>
<br>

<table class="footer" width="96%" align="center">
<tr>
<td align="center">Company Name&#8226; Company Address&#8226; Telephone: #*$!-#*$!-#*$!X<br>
<a href="mailto:info@socactivitycenter.com">info@company.com</a> <br>
&copy; 2011 Company. All rights reserved.</td>
</tr>
</table>

</td>
</tr>
</table>

</body>
</html>

 

Paul_o_b




msg:4329878
 12:34 pm on Jun 23, 2011 (gmt 0)

Hi,

Contrary to belief creating a sticky footer with tables in IE6 and 7 is nigh impossible unless you revert to quirks mode which is a no go from the start.

You can do it quite easily for modern browsers (ie8+) using this format.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body, .wrapper {
height: 100%;
margin: 0;
padding: 0;
border: none;
}
body {
background: rgb(255,255,255);
font-size: 100%;
line-height: 1.125em;
text-align:center;
}
table,td,th{vertical-align:top}
.wrapper {
background-color: rgb(255,222,239);
margin:0px auto;
padding: 0px 30px;
width: 52%;
border: 1px solid rgb(153,0,51);
text-align: left;
}
.header {
padding-top: 5px;
margin:auto;
border-bottom: 1px solid rgb(153,0,51);
overflow:hidden;
}
.navigation {
border-right: 1px solid rgb(153,0,51);
padding:10px;
}
.navigation ul {
width: 154px;
border-bottom: 0px solid rgb(153,0,51);
}
.navigation li {
width: 152px;
line-height: 2em;
height: 2.5em;
font-family: "MS Trebuchet", Arial, sans-serif;
font-size: 100%;
}
.navigation li a {
display: block;
text-decoration: none;
background: rgb(255,222,239);
color: rgb(153,0,51);
width: 142px;
padding: 0 5px;
}
.navigation li a:hover {
background: rgb(153,0,51);
color: rgb(255,255,255);
}
.content {
width:71%;
padding:10px;
}
.middle{height:100%}
* html .middle{height:80%}/* rough approximation for ie6*/
*+html .middle{height:80%}/* rough approximation for ie7*/
.footer {
font-family: Tahoma, Arial, sans-serif;
font-size: 0.675em;
text-align: center;
border-top: 1px solid rgb(153,0,51);
}
</style>
</head>

<body>
<table class="wrapper" cellspacing="0" cellpadding="0">
<tr>
<td class="header" colspan="2"><h1>Header</h1></td>
</tr>
<tr class="middle">
<td class="navigation">nav</td>
<td class="content">content</td>
</tr>
<tr>
<td class="footer" colspan="2"><p>footer</p><p>footer</p></td>
</tr>
</table>
</body>
</html>


IE6 and 7 just get an approximation of the height. IE6 and 7 don't take padding on the table element either and you would need to use cellspacing if you waated a gap but of course that would apply to all cells.

If you want to convert to a css only sticky footer (as tables shouldn't be used for layout) then the resources here have already been pointed out above. You will have to learn new techniques and methods for laying out the page though so it's not just a simple case of drag and drop :).

Here's your original code tidied up a little although I have snipped some content for brevity.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a {
color:rgb(153,0,51);
}
html, body, .wrapper {
height: 100%;
margin: 0;
padding: 0;
border: none;
}
body {
background: rgb(255,255,255) url(background.jpg) repeat-y fixed center;
font-size: 100%;
line-height: 1.125em;
text-align:center;
}
h1 {
margin:12px 0 8px;
text-align: left;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 1.55em;
color: rgb(153,0,51);
}
p {
margin-top: 12px;
margin-right: 8px;
margin-left: 0px;
text-align: justify;
font-family: Tahoma, Arial, sans-serif;
font-size: 1.0em;
color: rgb(0,0,0);
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.navigation ul {
width: 154px;
border-bottom: 0px solid rgb(153,0,51);
}
.navigation li {
width: 152px;
line-height: 2em;
height: 2.5em;
font-family: "MS Trebuchet", Arial, sans-serif;
font-size: 100%;
}
.navigation li a {
display: block;
text-decoration: none;
background: rgb(255,222,239);
color: rgb(153,0,51);
width: 142px;
padding: 0 5px;
}
.navigation li a:hover {
background: rgb(153,0,51);
color: rgb(255,255,255);
}
.wrapper {
background-color: rgb(255,222,239);
margin:0px auto;
padding: 0px 30px;
width: 52%;
border: 1px solid rgb(153,0,51);
text-align: left;
}
table.wrapper td {
vertical-align:top
}
.header {
padding-top: 5px;
margin:auto;
border-bottom: 1px solid rgb(153,0,51);
overflow:hidden;
white-space:nowrap;
}
.footer {
font-family: Tahoma, Arial, sans-serif;
font-size: 0.675em;
text-align: center;
width:100%;
border-top: 1px solid rgb(153,0,51);
}
#footer td {
vertical-align:bottom
}
.icons, .logo {
padding-top: 15px;
}
.logo img {
float:right;
}
.line {
width:95%;
margin:auto;
clear:both;
margin:0 10px;
}
.empty {
border-left: 1px solid rgb(153,0,51);
width:4%;
}
.content {
width:73%;
}
.middle {
clear:both;
width:100%;
}
.characters {
float:right;
width:320px;
}
</style>
</head>
<body>
<table class="wrapper">
<tr>
<td>
<table class="header">
<tr>
<td class="icons"><img src="image1.gif" width="88" height="88" alt="icon"><img src="image2.gif" width="88" height="88" alt="icon"><img src="image3.gif" width="88" height="88" alt="icon"><img src="image4.gif" width="88" height="88" alt="icon"><img src="image5.gif" width="88" height="88" alt="icon"></td>
<td class="logo"><img src="image.gif" width="294" height="88" alt="logo"></td>
</tr>
</table>
<table class="middle">
<tr>
<td class="navigation"><ul>
<li><a href="index.htm">Home</a></li>
<li><a href="afterschool.htm">Menu2</a></li>
<li><a href="contact.htm">Menu3</a></li>
<li><a href="gallery.htm">Menu4</a></li>
<li><a href="girlscouts.htm">Menu5</a></li>
<li><a href="parties.htm">Menu6</a></li>
<li><a href="programs.htm">Menu7</a></li>
<li><a href="registration.htm">Menu8</a></li>
<li><a href="summer.htm">Menu9</a></li>
<li><a href="testimonials.htm">Menu10</a></li>
</ul></td>
<td class="empty" ><img src="spacer.gif" width="1" height="1" alt=""></td>
<td class="content" valign="top"><h1>Welcome</h1>
<table class="characters" cellspacing="10">
<tr>
<td valign="top"><img src="image.jpg" width="300" height="117" alt="characters" border="2"> </td>
</tr>
</table>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p></td>
</tr>
</table></td>
</tr>
<tr id="footer">
<td><div class="footer"> Company Name&#8226; Company Address&#8226; Telephone: #*$!-#*$!-#*$!X<br>
<a href="mailto:info@socactivitycenter.com">info@company.com</a> <br>
&copy; 2011 Company. All rights reserved. </div></td>
</tr>
</table>
</body>
</html>



That version doesn't have the full length divider though.

JanaP10




msg:4330163
 8:09 pm on Jun 23, 2011 (gmt 0)

First of all, thank you for your post. Your revision of my code has removed all the extra space from the top and bottom and also provided the “footer at the bottom" solution.

<edit>
Also, am I understanding your post correctly that my layout using the revised code you provided (not the first one) will not work in IE 6 or 7? If so, how messed up will it look in either of these older browsers?

[edited by: alt131 at 10:44 am (utc) on Jun 24, 2011]
[edit reason] Thread Tidy [/edit]

Paul_o_b




msg:4331269
 8:28 pm on Jun 26, 2011 (gmt 0)

Hi,

Sorry for the delay in replying - been away all weekend.

Unfortunately you can't have space at the top and the bottom and still have a sticky footer approach using tables because 100% height is from top to bottom - no more no less. You can't stop it short unless you used something like 90% instead but that would mean you could never get it exact although it may be good enough in some cases.

You can do it without using tables but again its only an illusion as 100% always goes from top to bottom. What you can do is rub the top and the bottom out using the background of some inner elements to create the illusion of space around the layout. The drawback would be if you had repeating graphics on the body rather than a solid body colour and then you would get a mismatch.

Here is an example although we are starting to get too clever now and once you overstep the mark then its probably time to re-think the design.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only - use a proper reset in production*/
margin:0;
padding:0
}
h1, h2, p {
margin:.5em 0;
}
html, body {
height:100%;/* needed to base 100% height on something known*/
text-align:center;
}
body {
background:#fff;
color:#000;
font-size: 100%;
line-height: 1.3;
text-align:center;
}
body:before {/* Opera Fix*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* negate effect of float*/
}
#outer:after {
clear:both;
display:block;
height:1%;
content:" ";
}
#outer {
min-height:100%;
clear:both;
padding:1px 0;
background: rgb(255,222,239);
margin:-90px auto 0;/*footer height + extra to make space at bottom of layout - this drags the outer up through the top of the monitor */
width: 60%;
min-width:600px;
max-width:1200px;
border: 1px solid rgb(153,0,51);
border-bottom:0;
border-top:0;
text-align: left;
}
* html #outer {
height:100%
}
#header {
background:#fff;/* rub border out*/
padding:120px 0 0; /* soak up negative margin and allows header to start at top of page*/
margin:0 -1px;/* rub border out*/
position:relative;
zoom:1.0;
}
#header h1 {
margin:0 30px;
border-bottom: 1px solid rgb(153,0,51);
}
#header .inner {
border: 1px solid rgb(153,0,51);
border-bottom:none;
background: rgb(255,222,239);
padding:1px 0;
}
#footer {/* footer now sits at bottom of window*/
width:60%;
background: rgb(255,222,239);
margin:auto;
height:60px;/* must be a fixed height unfortunately */
clear:both;
min-width:600px;
max-width:1200px;
border: 1px solid rgb(153,0,51);
border-top:none;
text-align: left;
padding:1px 0;
}
#footer .inner {
margin:0 30px;
border-top: 1px solid rgb(153,0,51);
}
#sidebar {
float:left;
width:170px;
border-right: 1px solid rgb(153,0,51);
margin:0 0 0 30px;
display:inline;
padding:1px 0;
}
#main {
overflow:hidden;
zoom:1.0;
border-left:1px solid rgb(153,0,51);
position:relative;
left:-1px;
padding:1px 10px;
}
* html #main {
left:-4px
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<div class="inner">
<h1>Header</h1>
</div>
</div>
<div id="sidebar">
<p>side column</p>
<p>side column</p>
<p>side column</p>
<p>side column</p>
</div>
<div id="main">
<p>main column</p>
<p>main column</p>
<p>main column</p>
<p>main column</p>
<p>main column</p>
<p>main column</p>
<p>main column</p>
</div>
</div>
<div id="footer">
<div class="inner">
<p>Sticky Footer</p>
</div>
</div>
</body>
</html>




The above should work most everywhere but relies on things being in the right place at the right time and with the right dimensions. It will be difficult for you to change unless you can understand the concept and how it works which is why I am reluctant to share it.

You should probably ask yourself at this stage "Do I really want a sticky footer or would a basic normal layout suffice?" :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved