Footer problems!

HTML & CSS
1

Actually I like more to find directly somewhere a result to my problem, but this one is quite a pain for me!

I want that the stupid footer (which drives me crazy since hours :frowning: ) stays down also when the main-div too short is.

html-file:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Commissaries of the Phoenix</title>
<link rel="stylesheet" type="text/css" href="gw_dark.css">
</head>
<body>


<div id="header">

</div>

<div id="leftmenu">

</div>

<div id="main">

</div>

<div id="footer">
Footer doesn't stay's down if the main-div is to small is
</div>

</body>
</html>

css-file


@charset "ISO-8859-1";
html {
	height: 100%;
	width: 100%;
}

body {
        background-color: #fff;
	color: #101010;
	margin:0; 
	padding:0; 
	height:100%;
}
#header { 
    margin-top: 0em;
    margin-left: 0em;
    margin-right: 0em;
    border-top: 0px;
    border-left:0px solid #000;
    border-right:0px solid #000;
    border-bottom:2px solid #000;
	box-shadow: 0px 4px 3px #999;
	background-color: #444;
    width: 100%;
	height: 7em;
	opacity: 0.8;
}

#leftmenu { 
        width: 11.5em;
	position: fixed;
	left: 0;
	top: 8em;
        min-height: 20em;
        padding: 0.2em;
        border:2px solid #444;
        border-right:0px solid #444;
        border-left:0px solid #444;
        border-top:2px solid #444;
	box-shadow: 4px 0px 5px #999;
	border-radius: 0px 21px 21px 0px ;
	padding: 0.3em;
	opacity: 0.8;
	background-color: #fff;
}

#main { 
    width: 76%;
    min-height: 20%;
    margin-top: 1em;
    margin-right: 4.5em;
    margin-left: auto;
    margin-bottom: 1.5em;
    padding-bottom: 0.2em;
    border:0px solid #555;
    border-bottom:0px solid #444;
    border-top:0px solid #333;
    box-shadow: 4px 4px 5px #999;
    padding: 0.3em;
    opacity: 0.8;
    background-color: #ddd;
}
#footer { 
	margin-bottom: 0em;
	margin-left: 0em;
	margin-right: 0em;
	border-top:2px solid #000;
    border-left:0px solid #000;
    border-right:0px solid #000;
    border-bottom: 0px;
	background-color: #444;
	box-shadow: 0px -4px 3px #999;
    width: 100%;
	height: 7em;
	opacity: 0.8;
	text-align: center;
	color: #dddddd;
	padding-top: 0.3em;
}

What I make wrong? I didnt made anything since 2 years - today I begun again!

Yeah I know that the code is a chaos - I will clear him after I made the basic.

btw: this will be I hope my first Joomla-Template

2

Hi dadoirie. Welcome to SitePoint. :slight_smile:

It seems what you want is a “sticky footer”, but they are not easy to do.

Here is a page that describes in detail the best way to do this:

Work your way through that, and then come back if you have any questions. :slight_smile:

3

great ralph - thanks - it was easy to understand the idea of it and it helped. Now the footer is on bottom everytime.
I had just to put 0.4em more on the footers margin-top than the negativ margin-top of the outer (which is in my case called “allin” :wink: ) becouse if not than there
was a scrollbar becouse the fouter was to low. but ok
more strangely was that after that occured that the main-div when it was too big and u had to scroll doesn’t used the margin-bottom. so I had to put inside the
allin at last place a footerallin with the same number of allin margin-top but off course positiv.
maybe abit confused now?
I just post the code!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Commissaries of the Phoenix</title>
<link rel="stylesheet" type="text/css" href="gw_dark.css">
</head>
<body>
<div id="allin">

<div id="header">

</div>

<div id="leftmenu">

</div>

<div id="main">


</div>

<div id="allinfooter"></div>

</div>
<div id="footer">

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

CSS


@charset "ISO-8859-1";
html {
	height: 100%;
	width: 100%;
}

body {

background-color: #fff;

/*	
	background-image: url(background2.jpg);
	background-attachment: fixed;
	background-repeat:no-repeat;
	background-size: 100%;
*/

	color: #101010;
	margin:0; 
	padding:0; 
	height:100%;
	width: 100%;
}

#allin {
    min-height:100%;
	margin-top: -7em;
	border: 0px;
}
#header { 
	margin-top: 7em;
	margin-left: 0em;
	margin-right: 0em;
	border-top: 0px;
    border-left:0px solid #000;
    border-right:0px solid #000;
    border-bottom:2px solid #000;
	box-shadow: 0px 4px 3px #999;
	background-color: #444;
    width: 100%;
	height: 7em;
	opacity: 0.8;
}

#leftmenu { 
    width: 11.5em;
	position: fixed;
	left: 0;
	top: 8em;
    min-height: 20em;
    padding: 0.2em;
    border:2px solid #444;
    border-right:0px solid #444;
    border-left:0px solid #444;
    border-top:2px solid #444;
	box-shadow: 4px 0px 5px #999;
	border-radius: 0px 21px 21px 0px ;
	padding: 0.3em;
	opacity: 0.8;
	background-color: #fff;
}

#main { 
    width: 76%;
    min-height: 30%;
    margin-top: 1em;
    margin-right: 4.5em;
    margin-left: auto;
    margin-bottom: 1.5em;
    padding-bottom: 2em;
    border:0px solid #555;
    border-bottom:0px solid #444;
    border-top:0px solid #333;
	box-shadow: 4px 4px 5px #999;
	padding: 0.3em;
	opacity: 0.8;
	background-color: #ddd;
}
#allinfooter { 
	margin-top: 0em;
	border: 0px;
    width: 100%;
	height: 7em;
}	
#footer { 
	margin-top: -7.4em;
	border-top:2px solid #000;
    border-left:0px solid #000;
    border-right:0px solid #000;
    border-bottom: 0px;
	background-color: #444;
	box-shadow: 0px -4px 3px #999;
    width: 100%;
	height: 7em;
	opacity: 0.8;
	text-align: center;
	color: #dddddd;
	padding-top: 0.3em;
}

Would like to understand why that happend!

4

I don’t quite understand all of what you described, but you needed the extra negative margin on the footer to account for the top border and top padding on the footer.

border-top:2px solid #000;
padding-top: 0.3em;

To be honest, I would suggest using pixels instead, as mixing ems and pixels like this is imprecise and likely to lead to problems.

5

The first point I will try to explain it more clearly: If the main-div to long ist (much content), and I scroll down to the footer > a part of the main-div is overlaped by the footer and its not reacting on the margin-bottom > for that I had to put an extra footer (which u on browser dont see) after the main-div, but
inside the allin-div (as last div in the allin-div) - now the main-div is margin-bottom related to this allinfooter. is there a way to make it more clear
the code, becouse it seems for me like a cheat :lol:

2nd: Thanks for the understanding of the extra margin-top, because of the padding and border. Its strange that I didn’t came by myself on it.
but ok I did for allmost 2 years nothing.

3rd: I read right now some info about the difference of px and em - as the design now will be for a guild of an mmoprg I will use px, but after
when I’m making a template for a blog then I will use em, so that more people have access to the blog!

Saludos y Fuerza
Dado

6

Hi,

The link Ralph gave you shows you everything you need for a sticky footer and you shouldn’t deviate from the plan because it has been refined over the last 8 years and is the only version that works consistently well cross browser. You have also left out the fixes that makes it work in IE8 and opera.

You can’t use margin on the header instead of the thick border because you will get margin collapse on the container. Use a thick border as in my example and then there will be no margin collapse issues. The thick border on the header is the method by which the negative margin is compensated for and allows the content not to overlap the footer. You don’t need any negative margins in the footer as that is done on the main container.

Here is your code in basic working form (but I have not added the ie8 and opera fixes.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Commissaries of the Phoenix</title>
<link rel="stylesheet" type="text/css" href="gw_dark.css">
<style>
html,body { 
	height: 100%;
	margin:0;
	padding:0;
}
body {
	background-color: #fff;
	color: #101010;
}
#allin {
	min-height:100%;
	margin-top: -7em;
}
* html #allin { height:100% }
#header {
	border-top: 7em solid #000;
	border-bottom:2px solid #000;
	box-shadow: 0px 4px 3px #999;
	background-color: #444;
	height: 7em;
	opacity: 0.8;
}
#leftmenu {
	width: 11.5em;
	position: fixed;
	left: 0;
	top: 8em;
	min-height: 20em;
	padding: 0.2em;
	border:2px solid #444;
	border-right:0px solid #444;
	border-left:0px solid #444;
	border-top:2px solid #444;
	box-shadow: 4px 0px 5px #999;
	border-radius: 0px 21px 21px 0px;
	padding: 0.3em;
	opacity: 0.8;
	background-color: #fff;
}
#main {
	width: 76%;
	min-height: 20em;
	margin-top: 1em;
	margin-right: 4.5em;
	margin-left: auto;
	margin-bottom: 1.5em;
	padding-bottom: 2em;
	border:0px solid #555;
	border-bottom:0px solid #444;
	border-top:0px solid #333;
	box-shadow: 4px 4px 5px #999;
	padding: 0.3em;
	opacity: 0.8;
	background-color: #ddd;
}
#footer {
	height: 7em;
	background:red;
}
</style>
</head>
<body>
<div id="allin">
		<div id="header"> </div>
		<div id="leftmenu"> </div>
		<div id="main">main </div>
</div>
<div id="footer">footer </div>
</body>
</html>
7

Great!

Thanks a lot!
I have now studied the code and I like it, because I learned something and that is: Try to keep the code small and if something works how you would like it but you see the code is a big chaos und you had to make a lot unnecessary sideways to reach that what u want than its nice, but it will lead to other problems.
I will try now not to make the code bigger by solving something. More try other ways :wink:

just one small think which isnt a big deal for this template, but maybe in the future: Why I get at your code a scrollbar and acts like that the design das a 110% heigh and not (like its coded) 100%?

again thanks - I have learned from it!

Saludos y Fuerza
Dado

8

Funny, the negative top margin on the outermost wrapper version has NEVER worked and results in broken layouts for me – which is why I use the pad the bottom of the content wrapper and negative top margin on the footer approach, which is simpler and doesn’t break in anything I’ve tested in.

Also you can’t rely on EM fonts or heights on a sticky footer – firefox is a total idiot when it comes to calculating EM’s the same way twice, and as such will sometimes show a scrollbar and sometimes not depending on the window size. (much like it being a total idiot about what left:100% or right:0 means – rounding errors).


<body>
  <div id="heightWrapper">
    <div id="content">Content before footer here</div>
  <!--#heightWrapper --></div>
  <div id="footer">Footer</div>
</body>



/* assumes reset is in use */
html, body {
  height:100%;
  position:relative; /* opera and IE8 helper */
}

/* Opera Fix */
body:before {
  content:" "; /* doesn't work for me without at least a space inside it! */
  height:100%;
  float:left;
  width:0;
  margin-top:-9999em; /* using EM avoids divide by zero error in iCab */
}

#heightWrapper {
  clear:both;
  min-height:100%;
}

* html #heightWrapper {
  height:100%; /* IE knows not the min-height, but incorrectly treats height as such */
}

#content {
  height:1%; /* fixes IE8 resize bug, this is NOT haslayout fixing it! */
  padding-bottom:192px;
}

#footer {
  height:192px;
  margin-top:-192px;
}

Notice my approach to the IE8 fix… so long as some child element inside #heightwrapper has a % height on it, the resize bug for 8 goes away. Your empty content version of the Opera fix does NOTHING here, and not using EM’s for the footer (which sucks, but whaddayagonnado) dodges the “Firefox is a retard about EM’s” bullet.

9

:eek: Yeah - that idea is really much more simpler. nice one

I will try it tomorrow as soon I wake up and made my good-morning-coffee. (Its now 2.32 night here :wink: )

thanks for the idea

saludos
dado

btw: the post before from me - I use chrome - of course testing it on other browsers - just IE I gave up long ago (I know: isn’t right for the visitors, but IE is just crap) Still didnt tested v.9 and I hope (but dont think so) that it is better!

10

It works all the time for me and I’ve never had a problem with it which is why its the method I advise to use. Show me an example where its broken and I may change my mind or revise the method.

– which is why I use the pad the bottom of the content wrapper and negative top margin on the footer approach, which is simpler and doesn’t break in anything I’ve tested in.

Yes that’s fine, but in practice I find that my clients inevitably break the layout with this approach as they are always adding to the page and add elements under the Content and thus breaking the footer. This has happened a number of times now. With the header approach this has never happened (yet) which is why I prefer it.

Also this approach suffers from the fact that the content area is now 192px larger than it needs to be and any background images or colours extend below the content which is undesirable in most cases.

If you wanted an element in the content section with another background then you would still get 192px of the original background beneath it. Which at that point you find users moving the element out of the content and thus breaking the footer again.

Another point to consider is that if Content has a background and also has position:relative added then once again the footer disappears under the content. Not a hard issue to solve of course but this doesn’t happen with my header version and is therefore unlikely to break once handed to a client.

The height:1% on Content is a dangerous approach as far as IE6 is concerned and should there be floats in Content then the user will apply overflow:hidden to Content thus breaking ie6 as the content will be hidden.

The 9999em negative margin is past the limits of old opera versions (early 10 and before if I remember correctly) and unlikely to work and probably why you said you couldn’'t get it work before. -32767px is the safe limit and Simon (zcoprpan) from opera explained where that limit came from but newer versions of opera seem to have increased that limit now.

Lastly the position:relative on the html element causes an old safari bug and although its not an issue these days I still think its a hack that should be avoided (older safari would hide any other elements on the page that had position:relative defined).

Taking all that into account I prefer my version but agree that for modern browsers the issues mentioned aren’t important apart from the background colour issue and the fact that clients keep breaking the layout when this approach is used.

I would however agree that for pixel precision in a sticky footer you need to use px (although IE6 and 7 will likely always be a pixel out on odd pixel heights)

Your empty content version of the Opera fix does NOTHING here, and not using EM’s for the footer (which sucks, but whaddayagonnado) dodges the “Firefox is a retard about EM’s” bullet.

It works fine for me in every version of Opera I’ve tested since we started using it and not seen a problem. I don’t doubt that there are bugs in certain circumstances but that’s probably true for most everything else also. However, adding a space or come content could make it more solid as Firefox does have a weird collapsing margin bug where floats are cleared using “” without content although I haven’t run in to it when used with the sticky footer.