Two common CSS problems I usually meet and solution

• Footer need to be always at the bottom

Most of web applications have a footer. Footer is for your company or organization’s infomation, copyright, etc. And as its name, it need to be at the bottom. But somethime your body content is too short, your footer is still at the bottom of the page, but not the bottom of viewport. Like this

Solution:

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

  html,
  body {
     margin:0;
     padding:0;
     height:100%;
  }
  #container {
     min-height:100%;
     position:relative;
  }
  #body {
     padding-bottom:60px;   /* Height of the footer */
  }
  #footer {
     position:absolute;
     bottom:0;
     width:100%;
     height:60px;   /* Height of the footer */
  }

References: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

• Centering things

Following this article, you can center anything totally in CSS. The most common case is centering the unknown height and width element. And for short, this is the solution:

  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

Centering things in CSS will be more easier if you use flexbox. flexbox is simple for centering.

  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
  }