3 Column Footer Alignment. Please hAlp!

Hello guys, newbie to the boards and newbie to css.

I have a footer with repeating background image in the footer and I have set up 3 columns in my css and html. the text shows up on top of my footer background image but the footer columns are stacked on top of each other instead of inline. I have search google and message boards all day long (literally thats all i have done all day long lol). I have tried a few things I saw but still no solution. Strange that my columns in the body work fine but not the footer. Hopefully you guys can help me get these aligned.

How it looks now:
http://img266.imageshack.us/img266/6…01004at552.png

How it should look:
http://img69.imageshack.us/img69/1145/footerex.jpg

My css: which is probably terrifying to most of you because i’m new to this. I probably have extra stuff in there i don’t need now because i have been trying things.

#clearfooter {
min-height: 100%;
width: 900px;
margin:0 auto; /* centers #wrapper */

}
#footer {
background: url(../Images/footerbg.png) repeat-x left;
background-color: ;
height: 164px;
width:100%; /* centered div must be given a width */
margin:-80px auto 0; /* -80px sucks it back in & auto centers it */
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #B4A198;
padding-bottom: 0px;
}

#footercontainer {
float: left;
min-height: 100%;
width: 1007px;
}

#left{
height: 100%;
width: 124px;
float: left;
padding-right: 20px;
text-align:left;
display:inline;

}
#right{
height: 100%;
width: 124px;
float: right;
padding-right: 20px;
text-align:right;
display:inline;
}
#centered{
height: 100%;
width: 124px;
float: center;
padding-right: 20px;
text-align:center;
display:inline;
}

MY HTML:


</div><!-- end #container -->

<div id="clearfooter">
<p>&nbsp;</p>
</div>


</div><!-- end #wrapper -->

<div id="footer">
<div class="footercontainer">

<div class="left">Left aligned text here<br />Next line here</div>
<div class="right">Right aligned text here<br />Next line here</div>
<div class="centered">Center Text here<br />Next line here</div>

</div>
</div>

thanks for the help in advance guys!

Ok I tried all of that and still no solution. I don’t understand why my 3 columns in the body works fine but the footer columns are stacking.

thanks for the suggestions though.

ok i got it working now. thanks for the input!

I wont go into the rest of your css, also am guessing ast to the values, as I could not read them out of your css.

I would start by getting rid of 100% height footer;
there is also no such thing as float:center; float: right or left should put the center content between the other two other columns ( I think this is why it was stacking, instead of appearing side by side) then you can use margin-left or right to fine tune position.

finally add overflow:hidden; to #footer

hope that helps