Welcome to WebmasterWorld Guest from 54.167.252.62

Forum Moderators: not2easy

Message Too Old, No Replies

3 Column Footer Alignment. Please hAlp!

     
12:14 am on Oct 5, 2010 (gmt 0)



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.

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!
12:47 am on Oct 5, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



float: center isn't a real thing, you can only float left or right.
1:32 am on Oct 5, 2010 (gmt 0)



oh yeah i actually changed that already sorry about that. other that than, see anything?
10:42 am on Oct 5, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi insert_car welcome to the forums.

First of all make sure you assign classes or ids accordingly. You defined selectors in your style but you are using classes. You also need to get rid of the -ve margin unless you're trying to re-position the footer somewhere. Here is some code for your footer, I removed the errors and setup some background color for the footer.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>test page</title>
<style type="text/css">
#clearfooter {
min-height: 100%;
width: 900px;
margin:0 auto; /* centers #wrapper */

}
#footer {
background: url(../Images/footerbg.png) repeat-x left;
background-color: #ECECFC;
height: 164px;
width:100%; /* centered div must be given a width */

font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #B4A198;
padding-bottom: 0px;
}

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

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

}

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

}
</style>
</head>
<body>


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

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

</div>
</div>
</body>
</html>
1:13 pm on Oct 5, 2010 (gmt 0)



ok that got it man thank you for the help! awesome!
3:31 pm on Oct 5, 2010 (gmt 0)

5+ Year Member



Great! this is what I was looking for today, thank you!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month