homepage Welcome to WebmasterWorld Guest from 54.196.136.119
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
3 Column Footer Alignment. Please hAlp!
insert_car




msg:4211302
 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!

 

StoutFiles




msg:4211311
 12:47 am on Oct 5, 2010 (gmt 0)

float: center isn't a real thing, you can only float left or right.

insert_car




msg:4211323
 1:32 am on Oct 5, 2010 (gmt 0)

oh yeah i actually changed that already sorry about that. other that than, see anything?

enigma1




msg:4211541
 10:42 am on Oct 5, 2010 (gmt 0)

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>

insert_car




msg:4211612
 1:13 pm on Oct 5, 2010 (gmt 0)

ok that got it man thank you for the help! awesome!

BuzzyDev




msg:4211711
 3:31 pm on Oct 5, 2010 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved