Many times it requires to forcefully stick footer to bottom of page if content of web page is less this makes footer to appear at middle or top bottom section of page which is odd. so to make forcefully stick footer at bottom even if content of page varies , the following are the steps.
<html></body>
<div id="main">
<div id="container">
<div id="header">
this is header, with logo and all
</div>
<div id="content">
This is page content with less or variable text ,forms, images etc
</div>
</div>
<div id="footer">
this is footer...
</div>
</div> <!-- #main ends --->
</body>
</html>
Here #main is the div which encloses all the content of a page , inside main there is 2 div one is #container and other is #footer , we will concentrate on height and position of #main,#container and #footer div. the rest inner div header and content can be optional you can put any number of div's inside #container.
<style><!-- css -->
html,body{
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
color:#333;
height:100%;
/* this is important to give height to html and body */
margin:0px;
padding:0px;
}
#main{
min-height:100%;
/* important thing to give min height so that footer can go to bottom */
position:relative;
/* Position relative so that , in footer we can give position absolute */
float:left;
height:auto ! important; /* for cross browser compatible */
height:100%; /* have to give height 100% */
width: 100%;
}
#container {
float: left;
margin: 1px 2px 20px 14px;
/* you can give any margin according to your need */
padding-bottom: 34px;
/* only important thing the padding-bottom should be equal to footer height */
width: auto;
}
#footer{
bottom: 0 ! important;
/* this will stuck footer to bottom of page */
clear: both;
color: #FFFFFF;
height: 34px;
/* height of footer , same as padding-bottom of container */
position: absolute;
/* position to settle down the footer */
width: 100%;
}
</style>
<html></body>
<div id="main">
<div id="container">
<div id="header">
this is header, with logo and all
</div>
<div id="content">
This is page content with less or variable text ,forms, images etc
</div>
</div>
<div id="footer">
this is footer...
</div>
</div> <!-- #main ends --->
</body>
</html>
Here #main is the div which encloses all the content of a page , inside main there is 2 div one is #container and other is #footer , we will concentrate on height and position of #main,#container and #footer div. the rest inner div header and content can be optional you can put any number of div's inside #container.
<style><!-- css -->
html,body{
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
color:#333;
height:100%;
/* this is important to give height to html and body */
margin:0px;
padding:0px;
}
#main{
min-height:100%;
/* important thing to give min height so that footer can go to bottom */
position:relative;
/* Position relative so that , in footer we can give position absolute */
float:left;
height:auto ! important; /* for cross browser compatible */
height:100%; /* have to give height 100% */
width: 100%;
}
#container {
float: left;
margin: 1px 2px 20px 14px;
/* you can give any margin according to your need */
padding-bottom: 34px;
/* only important thing the padding-bottom should be equal to footer height */
width: auto;
}
#footer{
bottom: 0 ! important;
/* this will stuck footer to bottom of page */
clear: both;
color: #FFFFFF;
height: 34px;
/* height of footer , same as padding-bottom of container */
position: absolute;
/* position to settle down the footer */
width: 100%;
}
</style>
No comments:
Post a Comment