MINIMUM Theme: how to KEEP FOOTER DOWN on short pages

[LenaGV]

HELP: In Minimum Theme, I would like to keep the footer at the bottom of the browser for short pages, and to have it at the end of content for long pages.

FOUND but NOT working: Among others, I found two almost identical suggestions that I can not make work; here is one of two links:

IF you can make this solution work, LET ME know WHAT code you place WHERE (in what file and the exact place in the file).

NOTE: I do NOT want a sticky footer -- it does not work well for all of my current and future pages.

MY SITE: gordanavukovic.com
(artist and information designer&usability)

Thank you!

http://gordanavukovic.com

[LenaGV]

ADDITION:
In "FOUND but NOT working" above, after submitting my question the link I included didn't show up...here it is again:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

LenaGV

[bcoco]

Hi Gordana,

This worked for me, using Genesis 2 and it's HTML5 structure:

/* Sticky Footer 
------------------------------------------------------------ */
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
.site-container {
   min-height:100%;
   position:relative;
}
header {
   padding:10px;
}
#site-inner {
   padding:10px;
   padding-bottom:120px;   /* Height of the footer */
}
footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:120px;   /* Height of the footer */
}

[bcoco]

Oh, and if you’re still using the Genesis 1.x structure, then this also works (or did for me, but I haven't tested in on Minimum yet) :

'/* Sticky Footer
------------------------------------------------------------ */
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrap {
min-height:100%;
position:relative;
}
#header {
padding: 10px;
}
#inner {
padding: 10px;
padding-bottom:120px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:120px; /* Height of the footer */
}'

note: you may have to play with the padding values for the header and inner divs, since they could be overwritten elsewhere in your css, or need to be

Hope that helps!

[bcoco]

Shoot, sorry - messed up the first one:

#site-inner should be .site-inner (class, not id). My bad.

[Author]

Posts