Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

html5/css3: Footer with "position:fixed" glitching

html5/css3: Footer with "position:fixed" glitching


The question was answered.

At my website, I have a Footer that should be fixed at the bottom of the page with a width of 100%. It was working before, but once of a sudden it didn't (?)

This is the HTML code for the footer:

This is the CSS code for the footer:

* {
margin: 0 auto;
padding: 0;

div.footerHolder {
margin: 0;
position: fixed;
bottom: 0;
width: 100%;
height: 25px;
border: 1px solid black;
transition: height 1s;
-webkit-transition: height 1s;

Of course the CSS file is named "footer.css" and stored in the folder css. That's not the problem. The footer shows up somewhere lined up with another object. You can look at it here: My website. If you look at it, you'll see the lower box, not lining up as I want it... It seems to be lining up with the main box and header box, but I'm not sure how to fix that. I've tried several things like floating it to the left but that wasn't working.

Problem courtesy of: YSbakker


The source you posted on your question is incomplete, but looking at your site source's the problem comes from the fact that your div#headerHolder is not closed.

This is the CodePen equivalent to your site: It renders well on CodePen site, even with the missing


Note: You don't have to repeat * { ... } in all your CSS files, they are "merged" from the browser's perspective

Solution courtesy of: snooze92


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

html5/css3: Footer with "position:fixed" glitching


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription