CSS fixed to bottom and centered

Question

I need my footer to be fixed to the bottom of the page and to center it  The contents of the footer may change at all time so I can t just center it via margin-left  xxpx  margin-right  xxpx   The problem is that for some reason this doesn t work    whatever     position  fixed    bottom  0px    margin-right  auto    margin-left  auto      I crawled the web and found nothing  I tried making a container div and nada  I tried other combinations and gurnisht  How can I make this happen   Thanks

User · Answer

I ran into a problem where the typical position  fixed and bottom  0 didn t work  Discovered a neat functionality with position  sticky  Note it s  quot relatively quot  new so it won t with IE Edge 15 and earlier  Here s an example for w3schools   x000D   x000D   lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt  div sticky     position  sticky    bottom  0    background-color  yellow    padding  30px    font-size  20px     lt  style gt   lt  head gt   lt body gt    lt p gt Lorem ipsum dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas nisl est   dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dlerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dlerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dlerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dlerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  dolor nteger frinegestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas  lt  p gt    lt div class  sticky  gt I will stick to the screen when you reach my scroll position lt  div gt    lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

revised code by Daniel Kanis   just change the following lines in CSS   problem  text-align center   enclose  position fixed bottom 0px width 100      and in html    lt p class  enclose problem  gt  Your footer text here   lt  p gt

User · Answer

A jQuery solution    function          window  resize function            placeFooter                placeFooter           hide it before it s positioned         footer   css  display   inline         function placeFooter             var windHeight     window  height        var footerHeight       footer   height        var offset   parseInt windHeight  - parseInt footerHeight           footer   css  top  offset       lt div id  footer  style  position  fixed  display  none   gt I am a footer lt  div gt    Sometimes it s easier to implement JS than to hack old CSS   http   jsfiddle net gLhEZ

User · Answer

You should use a sticky footer solution such as this one             margin  0    html  body       height  100      wrapper       min-height  100       height  auto  important      height  100       margin  0 auto -142px     the bottom margin is the negative value of the footer s height       footer   push       height  142px      push must be the same height as  footer        There are others like this      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   wrap  height  100     body  gt   wrap  height  auto  min-height  100      main  padding-bottom  150px       must be same height as the footer      footer  position  relative      margin-top  -150px     negative value of footer height        height  150px      clear both        CLEAR FIX    clearfix after  content           display  block      height  0      clear  both      visibility  hidden    clearfix  display  inline-block      Hides from IE-mac       html  clearfix   height  1     clearfix  display  block     with the html    lt div id  wrap  gt        lt div id  main  class  clearfix  gt        lt  div gt    lt  div gt    lt div id  footer  gt    lt  div gt

User · Answer

There are 2 potential issues that I see   1 - IE has had trouble with position fixed in the past  If you are using IE7  with a valid doctype or a non-IE browser this isn t part of the problem  2 - You need to specify a width for the footer if you want the footer object to be centered  Otherwise it defaults to the full width of the page and the auto margin for the left and right get set to 0  If you want the footer bar to take up the width  like the StackOverflow notice bar  and center the text  then you need to add  text-align  center  to your definition

User · Answer

The problem lies in position  static  Static means don t do anyting at all with the position  position  absolute is what you want  Centering the element is still tricky though  The following  should work    whatever     position  absolute    bottom  0px    margin-right  auto    margin-left  auto    left  0px    right  0px      or   whatever     position  absolute    bottom  0px    margin-right  auto    margin-left  auto    left  50     transform  translate -50   0       But I recommend the first method  I used centering techniques from this answer  How to center absolutely positioned element in div

User · Answer

here is an example using css grid    x000D   x000D  html  body  x000D      height  100   x000D      width  100   x000D    x000D   container  x000D      height  100   x000D      display grid  x000D        we divide the page into 3 parts   x000D      grid-template-rows  20px auto  30px  x000D      text-align  center      this is to center the element    x000D       x000D    x000D   x000D   container  footer  x000D      grid-row  3      the footer will occupy the last row   x000D      display  inline-block  x000D      margin-top  -20px  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D       lt meta charset  UTF-8  gt  x000D       lt link rel  stylesheet  href  style css  gt  x000D       lt title gt Document lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D       lt div class  container  gt  x000D           lt div class  header  gt  x000D   x000D           lt  div gt  x000D           lt div class  content  gt  x000D   x000D           lt  div gt  x000D           lt div class  footer  gt  x000D              here is the footer x000D           lt  div gt  x000D       lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    you can use css grid a concrete example

User · Answer

Based on the comment from  Michael      There is a better way to do this  Simply create the body with   position relative and a padding the size of the footer   the space   between content and footer you want  Then just make a footer div with   an absolute and bottom 0    I went digging for the explanation and it boils down to this    By default  absolute position of bottom 0px sets it to the bottom of the window   not the bottom of the page  Relative positioning an element resets the scope of its children s absolute position   so by setting the body to relative positioning  the absolute position of bottom 0px now truly reflects the bottom of the page    More details at http   css-tricks com absolute-positioning-inside-relative-positioning

User · Answer

I have encased the  problem div in another div  lets call this div the enclose div    make the enclose div in css have a width of 100  and postion fixed  with a bottom of 0    then insert the problem div into the enclose div this is how it would look   problem  margin-right auto margin-left auto    what ever other styles     enclose  position fixed bottom 0px width 100      then in html      lt div id  enclose  gt       lt div id  problem  gt       lt  --this is where the text markup would go-- gt       lt  div gt   lt  div gt    There ya go   -Hypertextie

[css] CSS: fixed to bottom and centered

Examples related to css

Examples related to positioning

Examples related to sticky-footer