Monday, January 20, 2020

Simple sticky bottom footer

Simple sticky bottom footer example with text-overflow hidden with ellipses.

full source code

<html><head><title>Sticky Bottom Footer</title>
#content {
 text-align: center;
#google_promo {
 bottom: 30px;
    left: 0; 
    position: fixed;
    right: 0;
    text-align: center;
    transition: bottom 400ms;
.promo-content {
 border: 1px solid #ccc;
 border-radius: 16px;
 display: inline-block;
 padding: 0 16px;
 width: 237px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;

<div id="content">
 <h1>Simple Sticky Bottom Footer</h1>
 <div id="google_promo">
  <div class="promo-content">
   Hello, I am a sticky footer. It's simple to create me.