Hard-wrap div around messy code

Question

I have a footer, and want to do the good old fashioned "Keep the footer at the bottom no matter what" by wrapping the content in a div with min-height: 100% , making the footer absolute to the bottom of that container. My problem is, most files look like this:

<cfinclude template="header.cfm" />
<cfinclude template="some-content.cfm" />
<cfinclude template="footer.cfm" />

Which seems easy enough, just open the container div in the header and close it in the footer. However, throughout this 12-year-old application there are countless un-closed div's and random tags all over the place. So, when trying to wrap the sucker, the div doesn't make it all the way through the code before it gets thrown off at some point.

So the question is: Is there a happier way of keeping the footer at the bottom (I could do it in jQuery, calculating the window height and html height and whatnot, I'm really looking for something less messy if possible) or does anyone know of an obscure way to force a closing div tag to associate with it's opener?

Answer 1

You don't need to calculate window height or wrap everything in a container to keep a footer on the bottom. Create a div with your footer content at the begining or end of the html and make it stay stuck to the bottom using position: fixed; bottom: 0 position: fixed; bottom: 0 (you can also add some padding to the body if you don't want it to overlap content). If you need to support older IEs, use position: absolute and add a bit of Javascript to reposition it when the page is scrolled - lots of examples on the Internet about this (here's an example provided by rip747 : http://www.hardcode.nl/archives_139/article_244-jquery-sticky-footer )

Edit: Considering the first comment, you could also add a div after the element you want your footer to stay using jQuery. By adding it after the dom was loaded, there should be no more issues with unclosed elements.

Answer 2

If this is a gnarly old application it's unlikely to be using any of the new HTML5 elements, so you could wrap everything in, say, <article> instead of <div> .

This idea is a bit dirty though, unless you can find a good semantic match. And Draevor is right, there are other ways to glue stuff to the bottom of the page.

Edit: New HTML5 elements