SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    Code:
    #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:
    HTML Code:
    </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!

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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&#37; 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

  3. #3
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i got it working now. thanks for the input!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •