center footer area

**ecross** · 05-22-2012, 07:29 PM

Hello,

I'm using the RingofTime template at http://freehtml5templates.com and have been modifying it so it can fit the entire width of the screen. The problem I have been strugging is I would like to have the footer area to be center instead of aligned to the left. I tried adding a div section surrounding everything inside the <footer> tags hoping it would push everything in the middle of the page but that didn't work. This is what I have tried below.

If there is anything you can do to help me that would be great. Any ideas what I need to do?

CSS code:

Code:

.outer { margin: 0 auto; text-align: center; }

HTML code:

Code:

<footer>
<div class="outer">

...everything inside...

</div>
</footer>

**ecross** · 05-24-2012, 05:39 PM

Maybe this will help. This is the footer that I would love centered on the page. If you can help that would be great.

Code:

<!DOCTYPE html> 
<html lang="en"> 
<head>
<title>Footer Column</title> 
<style type="text/css">

	#wrapper {
 width: 100&#37;; 
margin: 0 auto; 
margin-top: 0px; 
margin-bottom: 0px; background: #fff; 
}

	footer {
display: block;
}

  	footer {
 width: 100%; margin: 0 auto;
clear: both; 
}

 

	#footer-area {
background: #994300;
color: #FFF;
font-size: 90%;
padding: 18px 0;
 
overflow: hidden;
}



	.footer-segment {
 
float: left; margin-right: 20px;
margin-left: 20px;
width: 190px;
} 



	footer aside h4 {
color: #faf0e6;
font-size: 16px;
line-height: 1.5em;
}



	footer ul {
list-style: none;
margin: -15px 0;
}


	
footer a:link, footer a:visited {
color: #ccc;
}



	footer a:hover { 
text-decoration: underline; 
}


	
footer p {
margin-top: -15px;
color: #faf0e6;
}



  </style>

</head> 
<body> 

<div id="wrapper>

<footer>
		
<section id="footer-area">

								
<aside class="footer-segment">
							
<h4>Friends</h4>
								
<ul>
									
<li><a href="#">one linkylink</a></li>
									
<li><a href="#">two linkylinks</a></li>
									
<li><a href="#">three linkylinks</a></li>
								
</ul>
					
</aside><!-- end of #first footer segment -->

					
<aside class="footer-segment">
							
<h4>Awesome Stuff</h4>
								
<ul>
									
<li><a href="#">one linkylink</a></li>
									
<li><a href="#">two linkylinks</a></li>
									
<li><a href="#">three linkylinks</a></li>
								
</ul>
					
</aside><!-- end of #second footer segment -->

					
<aside class="footer-segment">
							
<h4>Coolness</h4>
								
<ul>
									
<li><a href="#">one linkylink</a></li>
									
<li><a href="#">two linkylinks</a></li>
									
<li><a href="#">three linkylinks</a></li>
								
</ul>
					
</aside><!-- end of #third footer segment -->
					
					<aside class="footer-segment">
							
<h4>Blahdyblah</h4>
								
<p>&copy; 2010 <a href="#">yoursite.com</a> Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
		</aside><!-- end of #fourth footer segment -->

					
</section><!-- end of footer-area -->
	
</footer>


</div>

</body> 
</html>

Thread: center footer area

Thread Tools

Display

center footer area

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions