As I'm forever having to look up how to do 3 column CSS layouts with a fixed footer I'm publishing the code here:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>3 Colum Layout Template with Fixed Footer</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html
{
height: 100%;
}
body
{
height: 100%;
text-align:center;
}
#nonFooter
{
position: relative;
min-height: 100%;
text-align:left;
width:680px;
margin:5px auto;
}
* html #nonFooter
{
height: 100%;
}
#footer
{
position: relative;
margin-top: -7.5em;
clear:both;
}
#nav{width:120px; float:left;padding:5px;margin:5px;}
#content{float:left;width:400px;margin:5px;padding:5px;}
#right{float:left;width:100px;margin-left:10px;padding:5px;}
</style>
</head>
<body>
<div id="nonFooter">
<div id="nav">
<ul>
<li><a href="#">bla</a></li>
<li><a href="#">bla</a></li>
<li><a href="#">bla</a></li>
<li><a href="#">bla</a></li>
<li><a href="#">bla</a></li>
</ul>
</div>
<div id="content">
<h1>3 Colum Layout Template with Fixed Footer</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nec justo sed lectus porta
cursus. Aliquam ut sapien. Ut diam. Pellentesque quis ipsum. Aliquam erat volutpat. Nullam nisl eros,
volutpat non, aliquet tempus, tincidunt ut, diam. Vivamus lorem velit, ornare in, malesuada et, porttitor
ac, diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu
nisl eget felis gravida congue. Nulla ipsum massa, fermentum et, interdum in, euismod sit amet, augue.
Quisque pellentesque nisi quis nulla. Donec augue augue, congue id, gravida viverra, dictum in, quam. Nam
aliquam. Praesent quam nisi, commodo eu, auctor eget, suscipit quis, dui. Duis fermentum rutrum ante.
Pellentesque sollicitudin, tortor non consectetuer sollicitudin, purus velit ornare leo, facilisis porta
leo libero vitae sem. Cras ac mauris. Nulla facilisi.</p>
</div>
<div id="right">
<p>Google Bla</p>
<p>Google Bla</p>
<p>Google Bla</p>
</div>
</div>
<div id="footer">
© bla 2007
</div>
</body>
</html>
No comments:
Post a Comment