How to center this footer?

HTML & CSS
1

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 :frowning:

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

All help greatly appreciated :slight_smile:

2

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/showthread.php?1041498-Forum-Posting-Basics

3

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


#footerSocial {
[B]float: left;[/B] /* 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 :

#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

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 :slight_smile:

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

	&lt;!-- End SOCIAL MEDIA ICONS --&gt;
		
&lt;p class="footerContactText1"&gt;&lt;/p&gt;
&lt;p class="footerContactText2"&gt;&lt;/p&gt;
&lt;/div&gt;

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

#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;
}