Google Footer

by Mario Perez

HTML

<body>
<!--Begin Viewport-->
	<div id="viewport">
<!--Begin footer-->
		<div id="footercontainer">
		<footer>
<!--Make sure you float #footerleft left & #footerright right!-->
			<ul id="footerleft">
				<li><a href="#">Advertising</a></li>
				<li><a href="#">Business</a></li>
				<li><a href="#">About</a></li>
			</ul>
			<ul id="footerright">
				<li><a href="#">Privacy & Terms</a></li>
				<li><a href="#">Settings</a></li>
			</ul>
		</footer>
		</div>
	</div>	
	</body>

CSS

/*************General************/
body{
	height: 100%;
}
body, footer{
	width: 100%;
}
#viewport {
	max-height: 460px;
	min-width: 980px;
}
ul {
	font-family: Arial, Sans-serif;
	line-height: 27px;
}
a {
	text-decoration: none;
	color: #404051;
}
a:hover {
	text-decoration: underline;
	color: #000;
}
ul {
	display: inline;
	font-size: 13px;
	text-align: right;
	list-style: none;
}
	ul li{
		display: inline-block;
}
footer {
	background-color: #F2F2F2;
}
/*************Footer************/
#footercontainer{
    height: 40px;
}
footer	{
	border-top: 1px solid #d6d6d6;
	min-width: 980px;
	/*position: absolute;*/
	bottom: 0;
	text-align: center;
    height: 40px;
}
/*Gives height to the footer*/
#footerleft, #footerright {
	line-height: 40px;
}
#footerleft{
	float: left;
	margin: 0 0 0 30px;
}
/**Compensate for the last 3px needed on #footerright. 27px + 3px = 30px!**/
#footerright{
	float: right;
	margin: 0 3px 0 0;
}
#footerleft li a, #footerright li a {
	color: #666666;
	padding: 0 27px 0 0;
}