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

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

i'm trying horizontally center p element resides within section id of 'copyright', within footer element. i've tried give footer position:relative , add together position:absolute top:25px parameters id="copyright" horizontally align center of footer element. however, if seek method or padding-top:25px, bar of empty space below footer section. additionally, paragraph not centered. can explain me why happening ? thanks

here's code :

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

the line drops out of view because padded way much. , have utilize text-align center text. don't need specify width of 100% or max-width; because you're using absolute positioning, can set left , right 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: uses no "hacks". regular css. original code wasn't implemented right.

html css positioning