Two common CSS problems I usually meet and solution
Footer need to be always at the bottom Most of web applications have a footer. Footer is for your company or organization’s infomation, copyright, etc. And as its name, it need to be at the bottom. But somethime your body content is too short, your footer is still at the bottom of the page, but not the bottom of viewport. Like this Solution: HTML <div id= "container" > <div id= "header" ></div> <div id= "body" ></div> <div id= "footer" ></div> </div> CSS html , body { margin : 0 ; padding : 0 ; height : 100% ; } #container { min-height : 100% ; position : relative ; } #body { padding-bottom : 60px ; /* Height of the footer */ } #footer { position : absolute ; bottom : 0 ; width : 100% ; height : 60px ; /* Height of the footer */ } References: http://matthewjamestaylor.c