floating
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Created by: Reality Software | www.realitysoftware.ca
Released by: Flash MP3 Player | www.flashmp3player.org
Note: This is a free template released under the Creative Commons Attribution 3.0 license,
which means you can use it in any way you want provided you keep links to authors intact.
Don't want our links in template? You can pay a link removal fee: www.realitysoftware.ca/templates/
You can also purchase a PSD-file for this template.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type='text/css'>
body { margin:0; font-size:0.9em; line-height:20px; font-family: "Myriad Pro", "Trebuchet MS", Arial; background-color:#EEEFF7;}
a { color:#871A2F;}
a:hover { text-decoration:none;}
#container { background:url(floating-images/sidebar_bckg.gif) repeat-y top right #FFFFFF;}
#header { background:url(floating-images/header_bckg.jpg) repeat-x #2D1721;}
#logo { padding:30px 0 0 40px; height:34px; }
#logo a{ color:#FFFFFF; text-decoration:none; font-weight:bold; height:36px; font-size:26px; text-transform:uppercase;}
#menu { background: url(floating-images/menu_bckg.jpg) #84807A; height:30px; margin-top:47px;}
#menu ul { margin:0; padding:0;}
#menu ul li{ display:inline-block; float:left; width:104px; list-style:none; text-align:center;}
#menu a { display:block; float:left; width:104px; color:#000; font-size:14px; text-transform:uppercase; font-weight:bold; text-decoration:none; padding-top:8px; background:url(floating-images/button.gif) no-repeat 0 4px;}
#menu a:hover{ background:url(floating-images/button_over.gif) no-repeat 0 4px; padding-top:8px; height:22px;}
#text { margin: 0 320px 30px 20px;}
#text p { padding:0 20px 10px 0;}
#text li { list-style:none; padding-left:20px; background:url(floating-images/li.gif) no-repeat 0px 7px;}
#sidebar { float:right; width:270px; padding: 0 20px 30px 10px; font-size:13px;}
h1 { margin:0; padding:0; text-transform:uppercase; font-size:2em; color:#84807a;}
#main { float:left; background:url(floating-images/foot.gif) no-repeat bottom left; padding-top:20px;}
#footer { background:url(floating-images/footer_bckg.jpg) repeat-x #84807a; height:102px; clear:both;}
#left_footer { float:left; padding:40px 0 0 30px; text-transform:uppercase; color:#FFFFFF; font-weight:bold; font-size:12px;}
#left_footer a { color:#FFFFFF;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right; padding:40px 30px 0 0; text-transform:uppercase; color:#FFFFFF; font-weight:bold; font-size:12px; text-align:right;}
#right_footer a { color:#FFFFFF;}
#right_footer a:hover { text-decoration:none;}
</style>
</head>
<body>
<div id="container">
<!-- header -->
<div id="header">
<div id="logo"><a href="#">Your Website Name</a></div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
<!--end header -->
<!-- main -->
<div id="main">
<div id="sidebar">
<p><strong>Lorem Lipsum</strong> dolor sit amet, consectetuer adipiscing elit. <a href="#">Nullam pharetra</a> tempus nunc. Donec feugiat lorem nec odio. Mauris vitae nisi sed mi rhoncus ultrices.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pharetra tempus nunc. Donec feugiat lorem nec odio. Mauris vitae nisi sed mi rhoncus ultrices.</p>
</div>
<div id="text" >
<h1><strong>Welcome</strong></h1>
<p><strong>Floating</strong> is a free template created by <a href="http://www.realitysoftware.ca/">Reality Software</a> and released by <a href="http://www.flashmp3player.org/">Flash MP3 Player</a> under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, which means you can use it in any way you want provided you keep links to authors intact.</p>
<ul>
<li>
Lorem ipsum dolor sit amet, </li>
<li>consectetuer adipiscing elit. </li>
<li>Maecenas ac lacus. Etiam quis ante. </li>
<li>Nullam accumsan metus sit amet est. </li>
<li>Nullam diam. Nunc ac ipsum at nisl pretium congue. </li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ac lacus. Etiam quis ante. Nullam accumsan metus sit amet est. Nullam diam. Nunc ac ipsum at nisl pretium congue. Phasellus a nulla eu lectus nonummy facilisis. Suspendisse accumsan. In iaculis felis id justo. Quisque pharetra lectus ut orci. Morbi erat.</p>
<p>Nunc auctor turpis ac nisi semper vulputate. Pellentesque ligula. Curabitur hendrerit mauris. Phasellus a lorem. In enim magna, mollis id, pretium a, aliquam fringilla, odio. Curabitur hendrerit, ipsum non facilisis euismod, pede ante luctus leo, eget dapibus ligula diam eget eros. Sed mauris turpis, rhoncus ut, ullamcorper ac, pulvinar sed, nisl. Pellentesque sapien diam, pulvinar luctus, ultrices vel, laoreet vitae, ligula. Duis tristique ipsum quis eros. Proin consequat vestibulum elit. Duis in nulla et pede pellentesque rutrum. Duis non libero ut dui congue pharetra. Ut enim. </p>
</div>
</div>
<!-- end main -->
<!-- footer -->
<div id="footer">
<div id="left_footer">© Copyright 2009 Your Website</div>
<div id="right_footer">
<!-- Please do not change or delete these links. Read the license! Thanks. :-) -->
<a href="http://www.realitysoftware.ca/services/website-development/design/">Web design</a> released by <a href="http://www.flashmp3player.org/">Flash MP3 Player</a>
</div>
</div>
<!-- end footer -->
</div>
</body>
</html>
Related examples in the same category