Keeping Footer at the Bottom With CSS and HTML
Yup another post on the same day, again something old but haven't answered properly on the internet.
The issue is what every web designer keep searching for years after properly coding the theme :
"the damn footer doesn't stay at the bottom"
We deviate from the standard structure of
model of web page.
A slight adjustment. The new structure is :
----- ----- header
----- ----- content
Now we define the CSS stuff, the important elements are the top and footer elements. Others we don't have to worry about.
We make the #top element with 100% height BUT it would push down the footer as well. Then an unnecessary scroll-bar appears. So what we do is tell to the #top element "hey bro give some of your space below to the #footer element as well". How we do this? by giving a (-)ve value to the margin property of the #top element
NOTE: THE margin (-) value of #top element SHOULD BE THE SAME as the height property of the #footer element.
[works on all usable browsers :D]
But overall the good is far more than the bad, so happy footer-downing :D
|All times are GMT +5.5. The time now is 15:24.|