Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts

    Dumb CSS Centering Problem

    Hey All,
    Ok I've looked at this for so long and can't figure out what's wrong.

    I have a footer, and within that footer have a div element that is supposed to center all the content inside it. I have the margin on that div (footerCenter) set to 0 auto.

    It's sticking to the left side of the screen. Why?

    Thank you all for your help. My Code is below:

    The HTML:
    Code:
    <div id="footer">
      <div class="footerCenter">
      
      <div class="footerSocialWrap">
      	<div class="footerSocialPush">
        </div>
        <div class="footerSocialHolder">
        	<div class="footerSocialImage"><img src="images/facebook.png" width="32" height="32" alt="Facebook" /></div>
            <div class="footerSocialImage"><img src="images/twitter.png" width="32" height="32" alt="Twitter" /></div>
        </div>
      </div>
    
       	<div class="footerBox">
            Home<br />
            About <br />
            Contact <br />
            Blog<br />
            Pay Your Rent
            </div>
            <div class="footerBox">
            Commercial Properties<br />
            Industrial Properties<br />
            Multi-Family Properties<br />
            Land for Sale<br />
            Area Info
            </div>
                	
      </div>
    </div>
    <!--footer ENDS -->

    The CSS:
    Code:
    }
    	#footer{
    		background-color: #666;
    		height:200px;
    		width:100%;
    		z-index:1;
    		border:none;
    		background-repeat:no-repeat;
    		position:relative;
    		clear:both;
    		margin-top:-200px;		margin-left: auto;
    		margin-right: auto;
    		color: #CCC;
    		
    }
    .footerCenter {
    	margin: 0 auto;
    	width: 100%;
    	
    }
    .footerSocialWrap {
    	height: 100px;
    	width: 150px;
    	float:left;
    }
    .footerSocialPush {
    	float:left; height:70%; margin-bottom:0px;
    	width: 100%;
    	position:relative;
    }
    .footerSocialHolder{
    	clear:both; 
    	height:100px; 
    	position:relative;
    	padding-left: 15px;
    }
    .footerSocialImage{
    	float: left;
    	margin-right: 25px;
    }

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this:
    Code:
    #footerCenter {
    background-color:#ffffff;
    border-top:1px solid #000000;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:40px;
    }

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    Thanks for the post but it didn't work. It just pushed everything down.
    I've attached a picture.



    http://www.flickr.com/photos/79302198@N06/7264356698/

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just delete bottom and left inside css.

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok , one more try. change it like this:
    Code:
    #footerCenter {
    background-color:transparent;
    position:absolute;
    width:100%;
    margin-top:20px;
    text-align:center;
    height:40px;
    }

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    margin:0 auto only centers elements that display:block and have a width of less than 100%. Can't center something that is 100% in width. What you probably want is text-align:center;, no need for position:absolute either.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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