Help! Footer CSS won't center align!

thedepotnetwork · March 25, 2010

I have been working on this for some time now, and can't seem to get it right... why won't my footer content center align?

http://www.utahweddinglink.com/index.php

Scroll all the way down.

HTML


<!-- footer -->	
<div id="footer_above">	

<!-- footer-outer -->	
<div id="footer_above-outer" class="clear">
    <div id="footer_above-wrap">

	<div class="col-a">

		<h3>Contact Info</h3>

		<p>
	  <strong>Phone: </strong>(888) 254-3486</p>

		<p>Want more info - go to our <a href="{http_web_server}contact.php">contact page</a></p>			

		<h3>Follow Us</h3>

		<div class="footer-list">
			<ul>				
				<li><a href="{http_web_server}" class="rssfeed">RSS Feed</a></li>
				<li><a href="{http_web_server}" class="email">Email</a></li>
			  <li><a href="{http_web_server}" class="twitter">Twitter</a></li>
                    <li> <script src="http://static.ak.connect.facebook.com/connect.php/en_US" type="text/javascript"></script><script type="text/javascript">FB.init("a0601f7dbb168cdbb75bb90b219fe42d");</script><fb:fan profile_id="335173936333" stream="0" connections="0" logobar="0" width="200"></fb:fan><div style="font-size:8px; padding-left:10px"><a href="">The Wedding Link</a> on Facebook</div></li>									
			</ul>
		</div>					

	</div>

	<div class="col-a">			

		<h3>Site Links</h3>

		<div class="footer-list">
			<ul>				
				<li><a href="{http_web_server}">Home</a></li>
				<li><a href="{http_web_server}state-{local_state_variable_id}-{local_state_variable_format}/" >Vendors</a></li>
				<li><a href="{http_web_server}planning_galleries.php">Gallery</a></li>
				<li><a href="{http_web_server}shop_index.php">Shop</a></li>
				<li><a href="{http_web_server}talk.php">Talk</a></li>		
				<li><a href="{http_web_server}events/{local_state_variable_format}/" >Events</a></li>
				<li><a href="{http_web_server}coupons.php">Coupons</a></li>
				<li><a href="{http_web_server}advertise.php">Advertise</a></li>	
				<li><a href="{http_web_server}registry_form.php">Register</a></li>		
				<li><a href="{http_web_server}map.php">Site Map</a></li>					
			</ul>
		</div>					

	</div>

	<div class="col-a">

		<h3>Web Resource</h3>

		<p>Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu 
		posuere nunc justo tempus leo. </p>

		<div class="footer-list">
			<ul>
                    <li><a href="http://www.dreamtemplate.com" title="Website Templates">DreamTemplate</a></li>
				<li><a href="http://www.themelayouts.com" title="WordPress Themes">ThemeLayouts</a></li>
				<li><a href="http://www.imhosted.com" title="Website Hosting">ImHosted.com</a></li>
				<li><a href="http://www.dreamstock.com" title="Stock Photos">DreamStock</a></li>
				<li><a href="http://www.evrsoft.com" title="Website Builder">Evrsoft</a></li>
				<li><a href="http://www.seostation.com" title="SEO">SEOStation</a></li>
			</ul>
		</div>			

	</div>		

	<div class="col-b">

		<h3>About</h3>			

		<p>
		<a href="{http_web_server}"><img src="images/gravatar.jpg" width="40" height="40" alt="firefox" class="float-left" /></a>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. 
		Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu 
		posuere nunc justo tempus leo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. 
		Cras id urna. <a href="{http_web_server}">Learn more...</a>
		</p>			

	</div>		

	<div class="fix"></div>

	<!-- footer-bottom -->
	<div id="footer_above-bottom">

		<div class="bottom-left">
			<p>
			© 2009 <strong>Copyright Info Here</strong>     
			<a href="http://www.stylishtemplate.com/" title="Website Templates">website templates</a> by <a href="http://www.styleshout.com/">styleshout</a>
			</p>
		</div>		

		<div class="bottom-right">
			<p>		
				<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | 
	   		    <a href="http://validator.w3.org/check/referer">XHTML</a>	|
				<a href="{http_web_server}">Home</a> |
				<strong><a href="#top" class="back-to-top">Back to Top</a></strong>								
			</p>
		</div>

	<!-- /footer-bottom -->		
	</div>

<!-- /footer-outer -->		
</div></div>		

<!-- /footer -->

CSS

/* footer */
#footer_above {
    margin: 0;
    padding: 0;
    border: none;
text-align: center;
background: url(./images/main-bg-footer-repeat.png) repeat-x bottom;
width: 100%;
vertical-align:bottom;
}
#footer_above-outer {	
width:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color: #000;
background: url(./images/main-bg-footer.png) no-repeat bottom center;
color: #2c2b25;
text-align: left;
vertical-align:baseline;
    margin: 0;
    padding: 0;

}
#footer_above-wrap {
float: left;
width: 1000px;
margin-left: 10px;	
padding-top: 20px;	
display: inline;
}
#footer_above-wrap h3 {
margin-bottom: 15px;
font-size: 1.6em;		
font-weight: bold;	
color: #baaca2;
}
#footer_above-wrap .col-a {
width: 225px;
float: left;
display: inline;
}
#footer_above-wrap .col-b {
width: 225px;
float: right;	
display: inline;
}

/* footer-list */
#footer_above-outer .footer-list ul {
list-style: none;
margin-left: 20px;	
padding: 0;	
border-top: 1px solid #29201c; 
}
#footer_above-outer .footer-list ul li { border-bottom: 1px solid #29201c; }
#footer_above-outer .footer-list ul li a {
display: block;
width: 98%;
margin-left: 0;
padding: 5px 0;
border: none;
line-height: 2em; 	
color: #877878; 		
}
#footer_above-outer .footer-list ul li .email {
background: url(./images/email.gif) no-repeat 0 center;
padding-left: 20px;
}
#footer_above-outer .footer-list ul li .rssfeed {
background: url(./images/feed-icon14.gif) no-repeat 0 center;
padding-left: 20px;
}
#footer_above-outer .footer-list ul li .twitter {
background: url(./images/twitter.gif) no-repeat 0 center;
padding-left: 20px;
}
#footer_above-outer .footer-list ul li a span {
font-style: italic;
font-weight: normal;
font-family: Georgia, 'Times New Roman', Times, Serif;
font-size: .95em;	
}
#footer_above-outer .footer-list ul li a:hover,
#footer_above-outer .footer-list ul li a:hover span {
color: #fff;	
}

/* footer-bottom */
#footer_above-bottom {
float: left;	
width: 100%;
margin: 30px auto 15px auto;	
font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-Serif;			
}
#footer_above-bottom .bottom-left {	float: left; }		
#footer_above-bottom .bottom-right {
text-align: right;
padding-right: 0;	
}
#footer_above-bottom a.back-to-top {
background: url(./images/arrow-up.gif) no-repeat right center;
padding-right: 20px;
}


/* postmeta */
.postmeta {	
padding: 7px 5px; margin: 20px 10px 30px 10px;	
font-size: 1em;	
color: #545454;
border: 1px solid #111; 
background: #070707; 
}
.postmeta .date{ margin: 0 10px 0 5px;	}
.postmeta a.comments { margin: 0 10px 0 5px;	}
.postmeta a.readmore { margin: 0 10px 0 5px;	}

.post-info { font-size: .95em; padding-top: 3px; margin-left: 5px; color: #444;	}
.post-info a, .post-info a:visited { color: #AE275A; }



.post-footer {
font-size: 95%;
border: 1px solid #EFEFEF; 
background: #F8F8F8; 
padding: 8px 10px;
margin: 30px 15px 10px 15px;
}
.post-footer .date {
background: url(./images/clock.gif) no-repeat left center; 
padding-left: 20px; margin: 0 10px 0 5px;	
}
.post-footer .comments {
background: url(./images/comment.gif) no-repeat left center; 
padding-left: 20px; margin: 0 10px 0 5px;	
}
.post-footer .readmore {
background: url(./images/page.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;	
}


/* alignment classes & additional classes*/
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }
.no-border { border: none; }

/* clearing */
.fix { 
clear: both;
height: 1px;
margin: -1px 0 0;
overflow: hidden; 
}
.clear {	display:inline-block; }
.clear:after {
display:block; 
visibility:hidden; 
clear:both; 
height:0; 
content: " "; 
}

n000bie · March 26, 2010

quick fix from firebug

#footer_above {
   clear:both; /* added this*/
    margin: 0;
    padding: 0;
    border: none;
text-align: center;
background: url(./images/main-bg-footer-repeat.png) repeat-x bottom;
width: 100%;
vertical-align:bottom;
}

#footer_above-wrap {
width: 1000px;
padding-top: 20px;
margin:0 auto; /* and this*/
}

Sign In

Help! Footer CSS won't center align!

Recommended Posts

thedepotnetwork

Link to comment

Share on other sites

n000bie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information