Making a footer not rise above the bottom of the screen without extraneous markup?

Given the requirements of no extra markup and not caring about IE (does work in IE8), I present this solution (which does require the use of a fixed height header). I did have to use float rather than display: inline-block as my Safari 4.0 did not display it with min-height for this solution: style type="text/css"> * { margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; /*below for illustration only*/ background: yellow; } #Header { position: relative; z-index: 1; height: 60px; margin-bottom: -60px; /*below for illustration only*/ background: red; opacity: .8; } #Article { float: left; min-height: 100%; width: 69.9%; vertical-align: top; margin-bottom: -30px; /*below for illustration only*/ background: blue; } #Aside { float: left; min-height: 100%; width: 30%; vertical-align: top; margin-bottom: -30px; /*below for illustration only*/ background: green; } #Article:before, #Aside:before { content: ' '; display: block; height: 60px; width: 100%; } #Article:after, #Aside:after { content: ' '; display: block; height: 30px; width: 100%; } #Footer { position: relative; z-index: 1; height: 30px; margin-top: -30px; clear: left; /*below for illustration only*/ background: pink; opacity: .8; } Header Article Aside Footer.

Given the requirements of no extra markup and not caring about IE (does work in IE8), I present this solution (which does require the use of a fixed height header). I did have to use float rather than display: inline-block as my Safari 4.0 did not display it with min-height for this solution: HTML is just: Header Article Aside Footer.

1 You have a vote from me because this was the only solution that respected the requirements and worked on 4/5 browsers. The only problem is that on IE it looks so bad that is not usable at all. Ca you do something for IE to make it acceptable (doesn't have to work, but it should not make the page unreadable).

– sorin Jul 15 '10 at 15:58 If you feed IE7 (probably IE6 too, though have not tested yet... note it should be working in IE8) css that zero's out every negative margin in all four regions, then you have a readable file. – Scott Jul 15 '10 at 16:11 With javascript, of course, you could simulate the :before and :after and have it work in all the browsers, but you would still want the default readable without script working. – Scott Jul 15 '10 at 16:16 2 You forgot to include the "lorem ipsum" text in order to test how it does behave when you resize the page.

Also more important you forgot to add - this will solve the rendering in IE7! – sorin Jul 15 '10 at 16:30 1 @Jason: Okay, Firefox and Safari on my Mac was showing the footer pushed down, but what was causing it was the top margins on both the body and the h1 tag in the header. With those set to 0, I can confirm that your solution works also.

I you change your answer or submit a different answer with the corrected code, I'll give you a +1 vote, as it also meets the criteria for your original request. – Scott Jul 15 '107 at 13:06.

Here is the link, files.nextscreen.com/test.html . The code in the head section is below. I think I figured this out.

It would help seeing your layout visually. – meder Jul 13 '10 at 16:09 I used this style with my copy paste html in my question. It worked with there were only a few paragraphs and when there were lots of paragraphs spanning several screens.

Have you tried it in Chrome and Firefox? – Jason Christa Jul 13 '10 at 16:19 Does not work in IE8 for me. – JochenJung Jul 13 '10 at 21:01 It doesn't work in IE8 because IE won't style elements it does not know, ie: header, article, aside, footer.

If they were all divs this would work in IE8. – Jason Christa Jul 13 '10 at 21:48 1 One nice thing about yours is that IE7 works, and if you change your body tag definition to trick IE6 to give it min-height by doing the height: auto! Important followed by the height: 100% then your solution works in IE6 also.

– Scott Jul 13 '107 at 14:52.

Here is my HTML5 footer example: blog.i18n.ro/test/html5-footer.html WORKS: FF 3+ IE7, IE8, IE9 Chrome 3+ Safari 3+ Opera 10+. DEGRADES on: IE6 (meaning that it will look fine, but the footer will not be at the bottom) LIMITATIONS: footer height is hard-coded and if you want to change it you have to modify in 2 places. Assumes that you have structure.It would be nice to have a JS solution that does not require this structure.

The element does not wrap on small resolutions (mobile), but maybe someone will find a solution for this. I did not include the code here because current wiki is not able to deal properly with HTML code. This example is based on what Scott posted but solves the IE issues and adds HTML syntax.

I would really appreciate if you could find ways to improve this. Even if it does make minor improvements to the old browsers. Version 1.1.

I like you new addition, the popup for old browsers :D – bogdan Jul 15 '10 at 18:06 Does this work for you, files.nextscreen. Com/test. Html?

– Jason Christa Jul 15 '10 at 22:29.

CSS: * { margin: 0; } html, body { height: 100%; } . Wrapper { min-height: 100%; height: auto! Important; height: 100%; margin: 0 auto -4em; } .

Footer, . Push { height: 4em; } HTML: Copyright (c) 2008.

2 That is similar to what I use right now, I just don't like having to put wrappers and pushes into the markup. I was wondering if there was a more pure way to accomplish this. – Jason Christa Jun 30 '10 at 16:00 Yeah, it's not ideal, but given the limitation that browsers such as IE force us UI guys into, there's not a ton of options out there.

Here's another option that removes the "push" div: cssstickyfooter. Com/html-code.html. Take it one step further with the outstanding 960 grid system here: signalkraft.Com/sticky-footer-in-960-grid-system – bpeterson76 Jun 30 '10 at 16:25 2 Oh yeah, I am almost sure this can't be done in IE, which is why I limited it to just Firefox and Webkit browsers.

– Jason Christa Jun 30 '10 at 16:28.

I think you're talking about the margin of 10-15 pixels below the footer. Try adding this code to your CSS; body { margin-bottom:0px; } The body has a default margin of 10-15 pixels so in order to remove it to flush your design to the top or bottom you have to tell the body to have a margin of zero. Hope that helps.

{ display:block; } You are going to have to change the display to inline in your wrapper after that though.

First of all, no matter what you do, you'll need a wrapper div for the entire page. I usually call it #page_container or something. If you think about it, having a div container for the whole page doesn't defeat the essence of css style sheets.

On the other hand, if you had a bunch of wrappers scattered around the html page, it could potentially get pretty messy with all that extra markup. So, I always use a page_container on my layouts, even if I don't put any css styling on it, I always have one. Basically, it will just act like a body tag, only allow you to style it.

With that said, there are a couple solutions if your layout was refined to: ... Only Firefox you say? Did I hear that right? I don't think I've ever heard anyone say that before.In that case, its fairly easy.

The easiest solution would be: Test page Title of your page Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz This is a footer I've been experimenting with some other css styling, and I think I almost have a layout that could be cross-browser compatible. I'll post it if I'm not too late.

As a side note, the way I believe HTML should be designed is in small chunks. The html design you have laid out is sort of all left out in the open, without a home. I would much rather put everything in a page_container div, and then wrap all the page contents in a contents div.

Then you could break up the contents into smaller chunks like sidebar1, sidebar2, mainbar, etc... – Azmisov Jul 13 '10 at 18:10 One more note: the only other way I can think of doing it would be with a min-height:100% on the contents div. Apparently, however, specifying a min-height prevents any negative-margining/border-box styling. If there were a way to fix that, you could avoid using display:table and make it cross-browser.

Another note: the height:100% on the page container doesn't work when a doctype is declared. You'd have to look into that for a fix, since I don't know one off the top of my head. – Azmisov Jul 13 '10 at 18:39 There is a new CSS3 property 'box-sizing' that you can set to 'border-box' that will include padding and borders in the specified width instead them adding to the width.Reference.sitepoint.Com/css/moz-box-sizing – Jason Christa Jul 13 '10 at 18:46 It doesn't work if you have min-height:100%; set.

I guess the link says that too. I wonder why that is? – Azmisov Jul 13 '10 at 19:07.

Okay, here is the alternative css that I was talking about. It works in Firefox, Safari, and Chrome. IE7/IE6 don't work, you'd probably have to a little tweaking to get that working.

Opera has a small bug with the body margins. Other than that, it uses just basic CSS (unlike the display:table that isn't very compatible). Test page Title of your page Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz This is a footer Wow, if you just tweaked it a little and made it IE6-7 compatible, you'd be famous.

I think this is the first solution I've seen.

Does not work on IE8 as well, but a real nice solution! – JochenJung Jul 13 '10 at 21:19 You're relying on quirks mode? – meder Jul 13 '10 at 23:43 @meder: Does using the plain tag put you in quirks mode?

I didn't think it did. – Jason Christa Jul 14 '10 at 0:43 Not using a doctype puts you in quirks mode. – meder Jul 14 '10 at 0:48 Whats wrong with quirks mode?

– Azmisov Jul 14 '10 at 17:39.

You could easily modify the use of this to work for you: Float div to bottom of screen That post describes how to set a div to the bottom of the page on any circumstance. Just make the footer that div that you push down.

Unfortunately that solution seems to push the div down too low and a scrollbar shows up. – Jason Christa Jul 14 '10 at 0:40 By increasing the margin-top you can raise it to exactly where you want it. That may help.Do you have an example live something that I could look at?

– talkingD0G Jul 14 '10 at 13:06.

Since you mentioned that your solution worked except for IE, all you need to do is use JS to enable the styling of HTML 5 elements: medero.org/finally.html That would make the styles apply, but it still looks like, at least in IE6 it needs some extra help. Is this close to what you need for IE?

Luckily, I have ceased caring what it looks like in IE6. I feel if the markup is semantic it won't look pretty but any on IE6 will still get the idea. – Jason Christa Jul 14 '10 at 0:41 Can you check if it works in IE8?

– meder Jul 14 '10 at 0:49 The shim works because the elements are colored, but IE8 must have display inline as the default instead of display block because except for the footer being at the bottom it is laid out different. – Jason Christa Jul 14 '10 at 13:05 right, all one would need to do is add css rules to make em display block: article, nav, aside { display:block; } ( and the other elements ) – meder Jul 14 '10 at 21:45.

Working and tested on: Google Chrome Safari Opera Internet Explorer Firefox EDITED CODE (added overflow:auto; to #aside and #Article to fix the overflow) Header Article Aside Footer PS: Background colors are illustrative, thus the css can me more compact by avoiding repeated attributes!

Zuul: your solution did not work. If I fill the "Article" with text then the "Footer" does not 'push down' but remains at the original window height which ends up being in the middle of the "Article"'s content. – Scott Jul 16 '10 at 13:12 Just edited the code to fix the overflow on Article and Aside div.

– Zuul Jul 16 '10 at 14:40 That works if a person doesn't mind that the scroll bars show up on the two divs separately as opposed to the whole page. However, the solution does not quite fit the spec's of the desire as laid out in the question. Jason wanted the footer to be pushed down when the content was tall enough to fill the screen, but remain fixed at the bottom for short content.

Your solution keeps it fixed at all times. – Scott Jul 16 '10 at 17:13.

If you want a stick footer, you can look at how the css framework Compass does it. Or you can also use the multi browser support option, as describe here. The later has the advantage of having very simple and clear css and associated minimal html.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.