making footer for page.

[ketan7880]

Hi i would like to make footer for my page
i tried lot but not success.
can anybody help me.

i am sending my some code which i tried to do that.
#wrapper{
/*padding: 0px 0px 0px 0px;*/
position:relative;
width: 1050px;
margin: 0 auto;
min-height:100%;
padding-bottom:40px;
}
#siteInfo{
/*float:left;*/
position: absolute;
width:1050px;
bottom: 0;
clear: both;
background-color: #FFFFFF;
border-top: 1.5px solid #cccccc;
font-size: 75%;
color: #cccccc;
text-align:center;
}

[Fang]

The CSS is meaningless without the HTML. Show the complete document.

[Ascendancy]

By looking at the CSS I'm a little confused. This part specifically:

#wrapper{
/*padding: 0px 0px 0px 0px;*/
position:relative;
width: 1050px;
margin: 0 auto;

By the ID of wrapper I think you mean the main body, and the margin 0 auto would mean in the center of the page? However, using the position attribute takes it out of the page flow, so I am not sure what you are exactly trying to do. However, I can say that since you have defined the width of the main body, all you need to do is close all other divisions on the page except for the wrapper div, and then make one with an ID of footer or something, make it with the same width as the main wrapper, and maybe give it a small height so that way it really looks like a footer. Add a border, and a repeating background if you like and you've got a footer!

Hope this helps.

[Centauri]

using the position attribute takes it out of the page flow,

Relative positioning doesn't take an element out of the flow.

To get that wrapper to follow 100% min-height, its parent and its parent also need the 100% height, so you need

* { margin: 0; padding: 0;}
html, body { height: 100%;}

This zeroes default margins etc and sets both html and body to 100% height.

The footer then needs a height specified, and shout NOT use any positioning attributes - it should naturally follow the wrapper. The footer then needs a negative top margin equal to its total height to "pull" it back up on screen. The contents of the wrapper will also need a bottom padding equal to footer height so they don'r disappear behind it.

[ketan7880]

Hi Centauri
I did what u told but i didn't solve the prob.

here the code which i changes according ti u
html,body{
height:100%;
font-family: Arial,sans-serif;
color: #333333;
/*line-height: 1.166;*/
margin: 0px;
padding: 0px;
}
#wrapper{
width: 1050px;
margin: 0 auto;
padding-bottom:40px;
}
#siteInfo{
clear: both;
background-color: #FFFFFF;
border-bottom: 1.5px solid #cccccc;
font-size: 75%;
color: #cccccc;
text-align:center;
height:35px;
top:-35px;
bottom:0px;
}
site info is my footer

[Centauri]

You need a minimum height on the #wrapper and * html hack to feed the height to the #wrapper for IE6

* {
margin: 0;
padding: 0;
}
html, body {
height:100%;
}
body {
font-family: Arial,sans-serif;
color: #333333;
}
#wrapper {
width: 1050px;
margin: 0 auto;
min-height: 100%;
}
* html #wrapper {
height: 100%;
}
#content {
padding: 10px 10px 45px 10px;
}
#siteInfo{
background-color: #FFFFFF;
border-bottom: 2px solid #cccccc;
font-size: 75%;
color: #cccccc;
text-align:center;
height:35px;
top:-37px;
}

The first part zeros browser default margins and paddings so they don't interfere with height calculations. The wrapper gets the 100% minimum height, and a #content div inside the #wrapper gets the bottom padding, not the #wrapper itself. Also note the negative top margin needs to take into account the border width (which I changed as 1.5px is not a valid figure).