When I view the code as it is it works fine. However, when I add font-size: 4em; to the .wrapper (wrapper class) the footer moves to the middle of the page. I'm using Chrome 21.0.1180.60 m and I have tried in the Firefox 14.0.1. Both of them have a problem.
Can someone help me understand what is going on here?
I had some issues with that too. I wanted fluid or fixed height header and footer, and also to be able to stick two items to the bottom instead of one. Here is one method: http://instancia.net/?p=196 It works by using the table-row property, and setting the content row to 100%. (Please nevermind the mess on my site, I was tinkering.)
When I view the code as it is it works fine. However, when I add font-size: 4em; to the .wrapper (wrapper class) the footer moves to the middle of the page. I'm using Chrome 21.0.1180.60 m and I have tried in the Firefox 14.0.1. Both of them have a problem.
Can someone help me understand what is going on here?
Do you have a link?
.footer {
position: fixed;
bottom:0;
width: 100%;
background: #999;
height: 180px;
text-align: center;
}
It works by using the table-row property, and setting the content row to 100%.
(Please nevermind the mess on my site, I was tinkering.)