<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title>CSS Positioning Example</title> <style rel="stylesheet" type="text/css">body { color: #333; margin: 0px; padding: 0px; background-color: #ccc;}#page { position: absolute; top: 10px; left: 10px; width: 800px; background-color: #fff;}#masthead { border-bottom: 1px solid #ccc;}#topNav { border-bottom: 1px solid #ccd; padding: 5px; background-color: #e7e;}#topNav a:link,#topNav a:visited { padding: 0px 5px 0px 5px;}#sideNav { float: left; width: 150px; background-color: #F5f; border-bottom: 1px solid #ccc;}#sideRight { float: right; width: 150px; background-color: #F5f7f7; border-bottom: 1px solid #ccc;}#content { margin: 0px 150px 0px 150px; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}#footer { clear: both; border-top: 1px solid #ccc; padding: 10px;}.item { padding: 10px; min-height: 75px; height: 75px;}#search { position: absolute; top: 10px; right: 10px; z-index: 100;}#sideNav a:link,#sideNav a:visited { display: block; padding: 5px;}#sideNav a:hover { background-color: red;}</style></head><body> <div id="page"> <div id="masthead"> <h2>Masthead</h2> </div> <div id="topNav"> <a href="#">Top link one</a> <a href="#">Top link two</a> <a href="#">Top link three</a> <a href="#">Top link four</a> <a href="#">Top link five</a> </div> <div id="sideNav"> <a href="#">Left link one</a> <a href="#">Left link two</a> <a href="#">Left link three</a> <a href="#">Left link four</a> </div> <div id="sideRight"> This is a test. </div> <div id="content"> <div class="item"> <h3>Item One</h3> <p> This is a test. </p> </div> <div class="item"> <h3>Item Two</h3> <p> This is a test. </p> </div> </div> <div id="footer"> Footer </div> <form id="search" action=""> <input type="text" name="txtSearch" size="12"> <input type="submit" name="submit" value="Search"> </form> </div> </body></html>
