...

View Full Version : Dumb CSS Centering Problem



pennella
05-24-2012, 11:12 PM
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:

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

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

Mr.Joker
05-24-2012, 11:20 PM
Try this:

#footerCenter {
background-color:#ffffff;
border-top:1px solid #000000;
position:absolute;
bottom:0;
left:0;
width:100%;
height:40px;
}

pennella
05-24-2012, 11:35 PM
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//

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

Mr.Joker
05-24-2012, 11:38 PM
Just delete bottom and left inside css.

pennella
05-24-2012, 11:50 PM
Tried that and got this:
http://www.flickr.com/photos/79302198@N06/7264423676/

Mr.Joker
05-25-2012, 12:00 AM
Ok , one more try. change it like this:

#footerCenter {
background-color:transparent;
position:absolute;
width:100%;
margin-top:20px;
text-align:center;
height:40px;
}

_Aerospace_Eng_
05-25-2012, 02:53 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum