SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    canada
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer content not centered

    Hi All,

    Just getting ready to launch a site www.keiwareapplications.com/new

    If you look at the footer content area The Facebook and Twitter area I have a margin of 0 applied but the content is not centering to the middle of the page.

    here is the sample css code that corresponds to that area
    Code:
    #bottom container {
    	margin:0px auto;
    	width:960px;
    	background:#282828;
    }
    	
    #bottom {
    	height:160px;
    	background:#282828;
    	color:#fff;
    	padding:20px;
    }
    
    #bottom-twitter{
    	float:left;
    	width:300px;
    }
    #bottom-facebook{
    	float:left;
    	width:290px;
    	padding-right:10px;
    }
    #bottom-youtube{
    	float:left;
    	width:300px;
    }
    
    #bottom-youtube ul {
    margin:17px 0;
    }
    #bottom-youtube li {
    border-bottom:1px dotted #E9E9E9;
    list-style:none outside none;
    padding:0 0 5px;
    }
    
    #bottom-youtube a:link, #bottom-youtube a:visited {
    	color: #ffffff;
    	font-size: 1.2em;
    	text-decoration:none;
    }
    
    #bottom a:hover {
    	color: #cacaca;
    	text-decoration: none;
    	font-size:1.2em;
    }
    
    #footer {
    	background:none repeat scroll 0 0 #282828;
    	clear:both;
    	color:#999999;
    	height:60px;
    	padding:20px 0;
    }
    
    .footer_container {
    	margin:0 auto;
    	width:960px;
    }
    
    #copyright{
    	float:left;
    }
    #credit{
    	float:right;
    }
    #footer p { 
    	font-size:1.3em; 
    }
    I'm sure it's something really silly.

  2. #2
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try putting a set width on #bottom (maybe 900px?) then set margin left and right to "auto."

  3. #3
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, try overflow:hidden on #footer to get the gray color to wrap the floats.

  4. #4
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    canada
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Will not really work as I want the black bar to stretch across the entire width of the screen.
    Your Websites Your Way!!
    www.clhdesigns.com

  5. #5
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But the #footer contains the black color value. So try setting a height for the #footer of say 300px. You actually don't need the gray color for #bottom. What is happening is all your floats are located in a div which has an ID of bottom, but the DIV is naturally at 100% default. There is nothing to center when its defaulted to 100%. Setting a width on #bottom allows it to center the contained elements.

  6. #6
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    canada
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That almost 100 percent worked. Now my content all dissapeared on me except for the headings. Ideas?

  7. #7
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check the height on footer. I seem to remember it set to 60px. Try more like 180 or something.

  8. #8
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or just remove the height altogether.

  9. #9
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    canada
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect! Thanks for all your help.
    Your Websites Your Way!!
    www.clhdesigns.com

  10. #10
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome =)


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
  •