SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to center this footer ?

    How to code this css so the #footerSocial is centered ?

    #footerSocial {
    float: left;
    width: 220px;
    padding: 60px 0 0 0;
    margin: 0 0 0 100px; }

    ..........................................
    I tried several ways yet no luck

    #footerSocial {
    margin-left:auto;
    margin-right:auto;
    width: 220px;
    padding: 60px 0 0 0;
    margin: 0 0 0 100px; }

    All help greatly appreciated

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    CSS on its own is not enough. We need to see the HTML in context. Either link us to the page in question or post the code for an example page as outlined here: http://www.sitepoint.com/forums/show...Posting-Basics
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Ralf is right, w/o seening the HTML ( and possibly all your CSS.. as you may be overrididng something somewhere) it's hard to give a definitive answer. However here are some guesses

    Code:
    #footerSocial {
    float: left; /* if you float something,  it';s going to make it tham much harder to center*/
    width: 220px;
    padding: 60px 0 0 0;
    margin: 0 0 0 100px; }
    
     
    
    #footerSocial {
    margin-left:auto;
    margin-right:auto;
    width: 220px;
    padding: 60px 0 0 0;
    margin: 0 0 0 100px; /* here  you overrode your original   margin left/right declarations*/
    
    }
    try :

    Code:
    #footerSocial {
     
    width: 220px;
    padding: 60px 0 0 0;
    margin: 0 auto; 
    /* the following may or may not be necessary, depending on what the 100px left margin was originally for*/
    position:relative;
    left:100px;
    }

  4. #4
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello ralph.m, and dresden_phoenix, thank you both for your replies, apologizes for not including the html, a lack of knowledge being my only excuse

    <div id="footerSocial">
    <h3><p class="footerTitle">Share with Friends</p></h3>
    <!-- Start SOCIAL MEDIA ICONS -->

    <!-- End SOCIAL MEDIA ICONS -->

    <p class="footerContactText1"></p>
    <p class="footerContactText2"></p>
    </div>

    dresden_phoenix your code worked perfectly, many thank yous for your fast reply, and help

    #footerSocial {
    width: 220px;
    padding: 60px 0 0 0;
    margin: 0 auto;
    /* the following may or may not be necessary, depending on what the 100px left margin was originally for*/
    position:relative;
    left:100px;
    }


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
  •