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

#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.

Try putting a set width on #bottom (maybe 900px?) then set margin left and right to “auto.”

Also, try overflow:hidden on #footer to get the gray color to wrap the floats.

Will not really work as I want the black bar to stretch across the entire width of the screen.

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.

That almost 100 percent worked. Now my content all dissapeared on me except for the headings. Ideas?

Check the height on footer. I seem to remember it set to 60px. Try more like 180 or something.

Or just remove the height altogether.

Perfect! Thanks for all your help.

You’re welcome =)