My Footer Floats

Question

I have been trying various "sticky" footer solutions for the better part of three days with no success. I seek to place the footer at the bottom of the browser window in instances when not enough content is present to span the window's full height. Please. Help.

Here's the basic site structure:

<div id="siteWrapper">
     <header>
         <div id="header">
             <div id="headerWrapper"></div>
         </div>
     </header>

     <div id="content">
          <div id="innerWrapper">
               <div id="columnLeft"></div>

               <aside>
                    <div id="aside">
                         <div id="asideWrapper"></div>
                    </div>
               </aside>

          </div>
     </div>

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

</div>

And the associated CSS, edited for brevity, and also not reflecting any of the solutions I've tried (see below):

* {
     margin: 0;
     padding: 0;
     }

#header {
     width: 100%;
     display:inline-block;
     }

#headerWrapper {
     width: 90%;
     max-width:980px;
    }

#sitewrapper {
     width: 100%;
     min-height: 100%;
    }

#content {
     padding: 2%;
     width:90%;
     max-width: 980px;   
    }

#innerWrapper {
     display:inline-block;
    }

#columnLeft {
     display: inline-block;
     width: 70%;
     float: left;
     }

#aside {    
     width: 30%;
     float: right;
     }

#footer {
     background-color: #f5f5f5;
     width: 100%;
     }

I have tried the following solutions (I can only list two, evidently, because I lack reputation points), including Ryan Fait's...:

http://www.cssstickyfooter.com/
http://css-tricks.com/snippets/css/sticky-footer/

I'm not a developer, just someone who uses Google. This is the first "responsive" site I've developed, and the first time using HTML5 / CSS3.

One thing I've observed is people (Ryan Fait included) applying styles to what I understand to be HTML5's semantic elements (<header>, <article>, <aside>, <footer>). Is this common practice? If so, I can reduce the number of structural div's I'm using, which would nice.

Also, I have tried closing the siteWrapper div both above and below the footer, adhering the varying methods demonstrated in each solution listed above. I have viewed these various solutions in Chrome, Firefox, and Safari.

Any help you can provide is greatly appreciated.

Lagting

Answer 1

you could try positioning the element as { /other css attribs you want to set...;/ position: absolute; bottom:0; width:100%; height: 20px;} or whatever height you want. This will give you an always on footer. Hope it helps.

Swiftlet

Exactly. See a concrete example here: https://mcmap.net/q/266199/-my-footer-floats – Guglielma

Answer 2

Here's your solution.

After my initial post, I figured why not slap together one of those handy JS Fiddles, so here you go: http://jsfiddle.net/8uHF6/

Forget all that frustrating business of trying to use wrappers and set other elements to 100% height to squeeze the extra vertical space out of the layout, and so on. You just end up in a situation where you poke over here, and something squirts out over there, so you poke over there, and something squirts out somewhere else. Ugh.

Use absolute positioning for your main layout elements. Basically, you nail the elements down exactly where you want them by specifying their top and/or bottom values, including your main content element, which will automatically scale to fit the available space as your window changes size vertically.

Tell your main content element to use automatic overflow, so the content will appear to slide under the footer, out of sight. A scrollbar will appear automatically if it's needed. Float the main content elements if you want a floated layout inside of them (otherwise, don't bother). You can use a fluid or elastic grid layout inside of something like this, and so on.

Also, note that there is no overall "site-wrapper" or "page" div, which is kind of nice since the real goal of the semantic web is that your HTML contains content, and only content (HTML is data, not layout). Adding things like wrappers to your HTML to control layout is unfortunate. If possible, every last bit of layout logic should be in your CSS.

Good luck!

<html>
    <head>
        <style>
            html {
                height: 100%;
                min-height: 100%;
                font-size: 100%;
            }

            body {
                margin: 0;
                height: 100%;
                min-height: 100%;
            }

            header {
                background-color: #FF0000;
                float: left; /* if you want a layout with floated descendants... */
                position: absolute;
                width: 100%;
                top: 0;
                overflow: hidden;
                height: 4.6em;
                border-bottom: 0.15em solid yellow;
            }

            article {
                background-color: #CCCCCC;
                float: left;
                position: absolute;
                width: 100%;                
                top: 4.75em;
                bottom: 2.75em;
                overflow: auto;
            }

            footer {
                background-color: #AACCFF;
                float: left;
                position: absolute;
                width: 100%;
                height: 2.75em;
                bottom: 0;
                border-top: 0.15em solid blue;
            }
        </style>
    </head>
    <body>        
        <header>
            Header Stuff...
        </header>
        <article>
            Resize shorter vertically to see what happens when the content overflows.<br/>
            1<br/>
            2<br/>
            3<br/>
            4<br/>
            5<br/>
            6<br/>
            7<br/>
            8<br/>
            9<br/>
            10<br/>
            11<br/>
            12<br/>
            13<br/>
            14<br/>
        </article>
        <footer>
            Footer stuff...
        </footer>
    </body>
</html>

Guglielma

Answer 3

The main idea behind sticky footer is that you make the content above the footer take up 100% of the viewport height.

The wrap then is forced to have a min-height of 100%, but also allows it to be taller than the height of the viewport if the content is longer than the size of the viewport.

The real trick is that at the bottom of the main div, you put padding that takes up the same amount of space as the footer's height. Then you set a negative top-margin on the footer to pull the div up into that space.

http://jsfiddle.net/6L4hE/

---

HTML

<div id="wrap">
    <div id="main">
        <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
    </div>
</div>
<div id="footer"></div>

CSS

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 180px;}  /* must be same height as the footer */

#footer {background-color: cornflowerblue;
    position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

Chondriosome

Thanks for the detailed response. Everything you describe here exactly follows, or is a close derivation, of the solutions I've tested. This is why I included the full set of main structural components this design uses. What apparently is the sticky footer best practice is not effective on this design as it stands, either because of its components, applied styles, or some combo of both. Something simply is preventing the 'sticky' solution from working... – Lagting

@thgaskell, When you resize the window vertically and the main content starts to scroll, the resulting scrollbar appears on the entire window, including your footer, and your footer changes size as the window changes size. That does not happen when using this approach: https://mcmap.net/q/266199/-my-footer-floats – Guglielma

Right. That is what sticky footer is supposed to do. It will ensure that the area pushes the footer to the bottom of the window if there isn't enough content. But if there is more than enough, it will push the footer off the page and allow the user to scroll. I'm not quite sure what you mean when you say the footer changes sizes, the height is constant, it just gets pushed off the page if the window is short enough. – Chondriosome

But if the footer gets pushed off the page, then by definition it is not a sticky footer, right? – Guglielma

A "sticky" footer is a footer that "floats" to the bottom of the page only when there's not enough content. A footer that's always visible is called a "fixed" footer. – Chondriosome

Answer 4

I believe the proper trick is to make sure you force your page to 100% height by using this:

html, body {height:100%}

In addition, you should add

height:100%;

to your #content section.

Give that a try and let me know if that gives the result you're looking for...

Fulfill

Thanks very much for the response. What I hoped to convey by including links to the different solutions I've attempted is that I've sliced and diced this problem every which way but Sunday. This is also why I mapped the structural elements and applied styles. There seems to be something in that mix that prevents sticky solutions. – Lagting