Comments on: CSS Fixed Footer

By: Kurt

Kurt — Tue, 23 Feb 2010 22:46:56 +0000

Thanks for the tip.

By: Lasse Beckman

Lasse Beckman — Fri, 27 Nov 2009 14:47:40 +0000

My form tag was removed. A new try:

And for you out there use ASP.NET with the extra form tag.

By: Lasse Beckman

Lasse Beckman — Fri, 27 Nov 2009 14:46:05 +0000

And for you out there use ASP.NET with the extra tag. Change this to make this code work in all browsers.

Code in this exampel:
html, body {
height: 100%;
}

Change to this:
html, body, form {
height: 100%;
}

That’s all.

By: Jim Brothers

Jim Brothers — Wed, 16 Sep 2009 12:13:13 +0000

In all of my searches for a css footer solution, yours uses the least amount of code, and works great! Thanks!

By: CSS | Tutorials, Techniques, Hacks, & Resources - MLC#4 | The Blog of Joren Rapini

Sat, 27 Jun 2009 00:42:09 +0000

[...] Dave Woods – Freelance Web Designer UK » CSS Fixed Footer – absolute, bottom, css, fixed, footer [...]

By: Tinker

Tinker — Mon, 11 May 2009 12:14:30 +0000

This fails, as they all fail, if the container has two columns, one floating left, the other floating right. Any time the right column exceeds the height of the lewt column, the footer does not re-position at the bottom, but over-writes the column.

There is no simple way to do this, Dave, but this is a very nice try…

By: Winter

Winter — Fri, 10 Apr 2009 05:58:10 +0000

За статью спасибо вам огромное, все по делу, достаточно много кто это применяет на практике

By: Dean

Dean — Sat, 21 Mar 2009 17:01:37 +0000

ahhh, please ignore. I fixed the problem by simply making the container 120% for the individual page causing the problem. I’m not sure if that is the best solution or not, so if you would have done something differently then I’m all ears!

By: Dean

Dean — Sat, 21 Mar 2009 16:44:50 +0000

ugh, that didn’t come out great!

where it says dates or info, its just an editable region.

Theres a div id=”clear” below each date/info field

By: Dean

Dean — Sat, 21 Mar 2009 16:42:26 +0000

I’m currently reworking a website, and I’m using this solution which works great on most pages – however, one page I have created has left the footer in a dates field. I’m not sure where I’ve gone wrong.

HTML

title

body {
background: url(../images/backgroundbio.gif) no-repeat center 330px
}
#bio-dates, #bio-dates2, #bio-dates3, #bio-award-dates, #bio-award-dates2, #bio-exhibit-dates, #bio-exhibit-dates2, #bio-exhibit-dates3, #bio-exhibit-dates4, #bio-exhibit-dates5, #bio-exhibit-dates6, #bio-exhibit-dates7, #bio-exhibit-dates8 {
float:left;
line-height: 1.1em;
margin-left: 2em;
font-family: “Orator Std”, “Courier New”, Arial;
color: #666;
}
#bio-info, #bio-info2, #bio-info3, #bio-award-info, #bio-award-info2, #bio-exhibit-info, #bio-exhibit-info2, #bio-exhibit-info3, #bio-exhibit-info4, #bio-exhibit-info5, #bio-exhibit-info6, #bio-exhibit-info7, #bio-exhibit-info8 {
float:right;
text-align:left;
width:45em;
line-height: 1.1em;
font-family: “Orator Std”, “Courier New”, Arial;
color: #666;
}
.bottom {
padding-bottom: 3em;
}

Laura Jayne Strand
Biography
text
Education
dates

info

dates

info

Awards
dates

info

dates

info

Exhibitions
dates

info

dates

info

CSS
===

#container {
min-height: 100%;
width: 780px;
margin: 0 auto;
}
* {
padding: 0;
margin: 0;
}
body {
font-family: “Orator Std”, “Courier New”, Arial;
font-size: 0.9em;
color: 666666;
}
html, body {
height: 100%;
}
* html #container {
height: 100%;
}
p {
padding-top: 0;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 1em;
color: #666666;
font-size: 1em;
}
#clear {
clear: both;
}

.text {
font-family: “Orator Std”, “Courier New”, Arial;
text-align: justify;
margin-right: 1em;
margin-left: 1em;
line-height: 1.1em;
color: #666666;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li ul {
display: none;
position: static;
}

li:hover ul, li.over ul{ display: block; }

h1 {
font-size: 4.5em;
font-family: “Orator Std”, “Courier New”, Arial;
text-align: center;
padding-top: 0.5em;
padding-right: 0em;
padding-bottom: 0.7em;
padding-left: 0px;
font-weight: normal;
font-variant: small-caps;
color: #666666;
}
h2 {
font-size: 2.5em;
color: #666;
font-family: “Orator Std”, “Courier New”, Arial;
font-weight: normal;
text-align: center;
padding-bottom: 1em;
font-variant: small-caps;
}

h3 {
font-family: “Orator Std”, “Courier New”, Arial;
font-size: 1.5em;
font-weight: normal;
font-variant: small-caps;
text-align: center;
color: #666666;
padding-bottom: 0.5em;
padding-top: 0.5em;
}
#footer {
width: 780px;
color: #CCC;
text-align: right;
height: 30px;
padding-top: 10px;
margin: -50px auto 0 auto;
font-size: 0.8em;
}

===========

any ideas?