5 replies [Last post]
insert_car
insert_car's picture
Offline
newbie
Last seen: 11 years 7 weeks ago
Timezone: GMT-4
Joined: 2010-10-04
Posts: 4
Points: 5

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:

How it should look:

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!

insert_car
insert_car's picture
Offline
newbie
Last seen: 11 years 7 weeks ago
Timezone: GMT-4
Joined: 2010-10-04
Posts: 4
Points: 5

hmm...my other photo didn't

hmm...my other photo didn't show up. this is what it looks like at the moment. the columns/text are stacked.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Two problems: You've got

Two problems:

  1. You've got classes in your HTML but IDs in your CSS.
  2. There's no such thing as float: center; instead it you should give the centre div right and left margins larger than 124px and remove display:inline.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

insert_car
insert_car's picture
Offline
newbie
Last seen: 11 years 7 weeks ago
Timezone: GMT-4
Joined: 2010-10-04
Posts: 4
Points: 5

yeah i have actually changed

yeah i have actually changed the center float. as far as the html id tags i have changed those as well. they where correct first and i was trying some things and forgot to change them back. it still doesn't work after changing these things

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Can you post your updated

Can you post your updated code? Preferably a link to the page.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

insert_car
insert_car's picture
Offline
newbie
Last seen: 11 years 7 weeks ago
Timezone: GMT-4
Joined: 2010-10-04
Posts: 4
Points: 5

got it working man. thanks

got it working man. thanks for the help!