Why a bar of empty space appears below footer when I absolutely position an id container with a p element inside it?

Question

I'm trying to horizontally center a p element which resides inside a section with an id of 'copyright', inside a footer element. I've tried to give footer a position:relative and then add position:absolute as well as top:25px parameters to the id="copyright" to horizontally align it to the center of footer element. However, if I try this method or padding-top:25px, I always get a bar of empty space below the footer section. Additionally, the paragraph is not even centered. Can someone explain me why this is happening ? Thanks

Here's the code :

http://codepen.io/anon/pen/Cwyfb

Answer 1

The line drops out of view because you padded it way too much. And you have to use text-align to center your text. You don't need to specify a width of 100% or a max-width; because you're using absolute positioning, you can just set left and right to 0.

footer {
    position:relative;
    clear:both;
    width:auto;
    height:50px;
    background:#333333;
}

#copyright {
    position: absolute;
  left:0;
  right:0;
  text-align:center;
    top: 5px;
}

#copyright p {
    font-family: 'Oswald', sans-serif, arial, verdana;
    font-weight: 300;
    font-size: 0.9em;
    color: white;
}

http://codepen.io/anon/pen/JmDjs

NOTE: This uses no "hacks". This is regular CSS. The original code just wasn't implemented right.