Footer in CSS

[abfchgirlx]

I've done numerous google searches and a lot of searches have lead me here due to this problem.

However, I tried the fixes that people have suggested but I'm just butt out of luck.

<No site specifics, thanks. See TOS #13 [WebmasterWorld.com]>

You can see my problem. The footer is smack dab in the middle and on top of all my content.

I've chopped up my CSS so badly trying to figure this out that it's practically inreadable so I'll cut out the parts that matter the most:

body {
margin: 0px 0px 0px 51px;
background: #ADADAC url(http://example.com/background.jpg) repeat-y;
height: 100%;
padding: 0;
}

#contents {
width: 640px;
background: #FFFFFF;
text-align: left;
}
#blog {
width: 450px;
position: relative;
top: 0px;

}

.sidebar {
position: absolute;
width: 160px;
border-left: 1px dotted #A3A3A3;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
color: #333333;
padding: 0px 10px 0px 10px;
left: 500px;
margin: 0px;
top: 160px;
}

.column1 {
position: absolute;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
color: #333333;
padding: 0px 10px 0px 10px;
left: 50px;
margin: 0px;
top: 180px;
}

.column2 {
position: absolute;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
color: #333333;
padding: 0px 10px 10px 10px;
left: 178px;
top: 180px;
}

.column3 {
position: absolute;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
color: #333333;
padding: 0px 10px 0px 10px;
left: 350px;
margin: 0px;
top: 180px;
}

.bottom {
position: relative;
width: 640px;
height: 5%;
clear: both;
background: #5F4664;
bottom: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
color: #DECCDC;

}

If someone can help me and let me know why nothing is moving or just fix my code for me.. that'd be great! I've been fighting with this for two days. I've read a TON of information on absolute positioning and using the percentage to position and I'm still getting everything to not be where it's suppose to be.

Thanks!

[edited by: SuzyUK at 11:35 pm (utc) on April 1, 2005]

[faltered]

I think your problem is that you have all of the elements on your page absolutely positioned, whereas the footer is relative positioned.

You might want to try using floats, instead. You could float: left your three content columns. Then float: right your sidebar. Then, place your clear: both and then the footer. Make sense?

Also, in my browser (Firefox) your right column comes out of the larger container (the text flows onto the background for me). Just FYI.

[abfchgirlx]

So I delete the positioning part, right?

That's what I did. The footer is now at the bottom. Thanks. :D

However now two of my columns (both the two that are suppose to be positioned on the right next to the other two on the left) are now on the bottom as well.

Any suggestions?