Hi I want to make a footer that regardless of much content their is above to stick in the somewhat
the same position. I am using the table, table row method is that enough? Point is to not have a footer that will be all the way to the top. website
footer{
background:#1d4589;
width:100%;
height:100%;
display: table-row;
}
#outerwrapper{
height: auto;
min-height: 100%;
display: table;
}
I basically dont want this:
Try this table-free solution:http://www.pmob.co.uk/temp/sticky-footer-ie8new.htm
Credit goes to our very own, Paul O’B. 
Hi, this is a simple fix. Don’t use tables. Use this
[code]<!doctype html>
Testing out some stuff *{ margin:0; } html, body{ height:100%; }.page-wrap {
min-height: 100%;
margin-bottom: -200px;
}
.page-wrap:after {
content: “”;
display: block;
}
.site-footer, .page-wrap:after {
height: 200px;
}
.site-footer {
background-color:green;
}
Content placed here
The idea is to utiilize the min-height:100%, then pushing it up by the height of the footer. Since we are working with block elements, the footer will always be below the wrapper, which conveniently is placed off the bottom of the page by the height of the footer. Hope that makes sense. I’m rusty
shouldnt we avoid using negative values?
Maybe someone else can clarify. I’m just getting back into html/css after a 4 year hiatus. So I am not qualified to say whether or not there is a better way. Inspecting Paul OB’s work, he seems to use the same principles as what I explained. It’s better than using tables for their unintended purpose, IMO.
ok great thanks
You should also avoid fixed heights
Your “quick example” required a fixed height footer. Fixed height containers are undesirable in a fluid environment.
Paul has a newer CSS sticky footer which is based on CSS table behaviors. It is by far the best you are likely to find.
My primary PC is down so I am unable to post a link at this time. I’m sure someone else can identify it for you.
Love to get that link when you get a chance - thanks
In my limited experience I’ve found that whenever I need complex convoluted tweaking to bang something into shape it is because I didn’t do something right elsewhere.
Not always the case, but it usually is
I experimented with this method and it worked:
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
Think of it this way:
1.) you must make your root elements( HTML,BODY, etc.) 100% height of the view port
2) your outermost container is then set to min-height:100%; this means that even when empty it will be at least the height of the parent element ( and by extension the viewport)— hold on that thought for a second.
if there is more content than the window could hold , then it will simply overflow the parent elements, causing a scroll … which is what we want anyway
3). we use some sort of shim method, for the sake of this example we pad the BOTTOM of the last element inside the main shell with so that that bottom padding is the same height as the footer. this way, no matter what there will be an EMPTY area the height of the footer at the bottom of the main shell.
Alternatively, If you still wanted to d this using display:table ( not actual mark up!) you could do this:
.shell { display: table; background: pink ; min-height:100%; width: 80%; margin: 0 auto; table-layout: fixed }
.main , footer { display:table-row; background: red; color:green;}
footer { height:5em; background: blue; color:#fff;}
<div class="shell">
<div class="main">
<p> main content</p>
<p> main content</p>
<p> main content</p>
<p> main content</p>
<p> main content</p>
<p> main content</p>
<p> main content</p>
<p> main content</p>
<p> main content</p>
<p> main content</p>
</div>
<footer>foot</footer>
</div>
There is really nothing wrong with using display:table; as long you don’t use actually TABLEs in the mark up. But it it’s support will be slightly less, you will have to follow the structure of tables and it does limit your use of AP children; none of thee may be important to your design however.
Of course it works, but it requires a fixed height footer. If that is what you need, then you’re all set.
Otherwise, give Paul’s a look.
I just need a fixed footer 
Sorry, I misunderstood.
well you said to avoid fixed heights ill try paul’s…
I tried applying his method to my website but it does not stick not sure what I
am missing…Codepen
Paul’s footer is a “sticky-footer” not a “fixed footer”. You said “fixed footer” and I was thinking “sticky footer” so this may not be what you want. Nevertheless, save this file to your computer and open it in your browser. The code was copied from your CodePen and “repaired” so the sticky footer works. You will need to repair the absolutely positioned nav menu.
sticky-footer-csosa.html (9.3 KB)
The table-free sticky footer demo I think you think you linked to is here:
http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm
Here it is, and it’s the best sticky footer so far:
http://www.pmob.co.uk/temp/sticky-footer-auto-height.htm
I think the difference between a fixed footer and a sticky footer need to be clarified here 
A fixed footer is one that sticks to the bottom of the viewport at all times no matter where other content is. If the page content is greater than the height of the viewport then the content will go behind the fixed footer and the fixed footer sits on top of it. This means that the last piece of flow content will be hidden behind the fixed footer unless you pad it out with a height equal to the height of the fixed footer.
This is the main drawback of fixed positioned footers and should only be used for small pieces of text like a copyright message or a couple of links that won’t wrap.
A Sticky footer on the other hand is a footer that only sits at the bottom of the viewport when there is not enough content above it to push it down. Once the content reaches the footer then the footer moves down with the content and stays at the bottom of the document and not the viewport.
All my older examples of sticky footers used magic numbers to create this effect because that was the only way to support ie7 and older. These days now that ie7 support can be dropped the display:table method is perfect because it uses no magic numbers and is perfect for a responsive layout.