Someone asked me to show them how to do something via CSS, and this is the example I came up with. Thought I’d post it on here for posterity:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
/* Layout */
body { margin: 0; padding: 0; }
#container { position: relative; top: 0; left: 0; width: 100%; height: 100%; }
/* The header and search windows are just normal divs */
#header { height: 40px; margin: 0; padding: 10px; }
#search-box { height: 20px; padding: 5px 10px; }
/* Content "top" is total height of header and search-box heights (including padding) */
#content { position: fixed; left: 0; right: 0; top: 90px; bottom: 60px; }
/* These elements are contained within the content div, so we can "absolutely" position them within the container
If an element is within a positioned element, "absolute" postion is actually relative to the container!?! */
#nav { position: absolute; top: 0; left: 0; bottom: 0; width: 200px; }
/* Here we position the nav menus relative to the container */
#nav-1, #nav-2 { position: relative; left: 0; height: 50%; overflow: auto; width: 180px; padding: 0 10px; z-index: 9999; }
/* The content div is also absolutely position inside. The overflow allows us to have the nice scrollbar effect */
#main { position: absolute; top: 0; left: 200px; right: 0; bottom: 0; overflow: auto; padding: 10px; }
/* The footer is absolutely position on the page at the bottom of the window */
#footer { position: fixed; left: 0; right: 0; bottom: 0; height: 40px; margin: 0; padding: 10px; }
/* Design */
#header, #nav, #footer { background: #666; color: #FFF; }
#search-box { background: #CCC; }
#search, #search-results { display: none; }
#header h1 { margin: 0; padding: 0; }
#search-box p { margin: 0 0 5px; }
#main h2 { margin-top: 0; }
#footer p { text-align: center; }
/* BlockUI */
div.blockMsg { background: #FFF; border: 3px solid #CCC; padding: 10px; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Hello World!</h1>
</div>
<div id="search-box">
<p><a href="#">Search</a></p>
<p id="search"><input type="text" id="search-val" name="search-val" value="Search" />
<input type="submit" id="search-submit" name="search-submit" value="Submit" /></p>
</div>
<div id="content">
<div id="nav">
<div id="nav-1">
<h3>Top Nav</h3>
<ul>
<li><a href="#">Nav Item</a></li>
<li><a href="#">Nav Item</a></li>
<li><a href="#">Nav Item</a></li>
</ul>
</div>
<div id="nav-2">
<h3>Bottom Nav</h3>
<ul>
<li><a href="#">Nav Item</a></li>
<li><a href="#">Nav Item</a></li>
<li><a href="#">Nav Item</a></li>
</ul>
</div>
</div>
<div id="main">
<h2>Welcome!</h2>
<p>Quisque lobortis arcu ut augue molestie dignissim. Sed ipsum leo, tristique ut placerat ut, gravida sagittis est. Ut pharetra adipiscing sem, ac viverra arcu tristique at. Aliquam sed massa eu sem porta consectetur. Donec convallis, sem vitae laoreet faucibus, sapien nulla lacinia mi, ac tincidunt lectus quam nec purus. Sed tristique sapien non leo adipiscing eu porta justo tincidunt. Quisque quis vestibulum quam. Etiam ligula sapien, pharetra quis mollis in, faucibus non elit. Etiam fermentum tempor nunc et auctor. Morbi id leo tempor justo placerat accumsan at sit amet odio. Nunc tincidunt molestie aliquam. Phasellus ligula libero, auctor id tempus id, mollis a mauris. Sed eget sodales leo. Sed eget sem id nibh tincidunt semper non a arcu. Proin vel purus in diam congue tincidunt. Nam vitae augue lorem. Nam nec massa id turpis egestas tempor nec in neque. Nam pulvinar odio sagittis lectus feugiat hendrerit. In a erat lectus. Nulla ut purus sapien.</p>
<p>Curabitur sollicitudin, dolor non sodales tempus, justo erat volutpat tortor, ac mollis dui urna id massa. Aliquam lorem metus, commodo sit amet sodales sit amet, accumsan ut felis. Sed felis nisi, pellentesque a adipiscing sit amet, sagittis a justo. Proin rutrum nunc sit amet eros bibendum sed rhoncus ligula sagittis. Maecenas consectetur, sapien a varius dictum, elit dui molestie erat, eu aliquam felis massa nec orci. Maecenas nec dui arcu, in elementum elit. Suspendisse in enim id tellus feugiat porttitor at et tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus id ipsum lorem, vel ullamcorper mi. Curabitur id odio eu quam faucibus commodo sed ac eros. Cras vel nulla in tellus cursus pellentesque. Donec magna purus, viverra non tempor ac, convallis et erat. Mauris ultricies nisl vel elit pretium et eleifend ligula commodo. Integer quam nulla, aliquam id malesuada eu, semper in mauris.</p>
<p>Quisque sollicitudin suscipit sapien, in rhoncus sapien gravida eget. Duis at fermentum metus. Donec dui lacus, fringilla ut bibendum eu, laoreet vitae nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In a quam mi, eget faucibus nulla. Mauris viverra consectetur ante nec mattis. Nunc porta mi et purus convallis dignissim luctus urna ultricies. Vivamus metus neque, malesuada laoreet imperdiet non, tincidunt lacinia massa. Ut at lorem et dolor accumsan lobortis quis eu mi. Aliquam pulvinar gravida hendrerit. Duis ac ipsum neque. Phasellus vel mi sed justo feugiat auctor. Phasellus porta, turpis ornare rutrum porta, orci tortor tincidunt dolor, id volutpat justo erat non est. Phasellus dapibus tristique feugiat. Curabitur fermentum vehicula mauris ac accumsan. Sed hendrerit est vel turpis blandit sed sollicitudin quam accumsan.</p>
<p>Fusce pharetra, eros id pharetra dapibus, lorem nunc facilisis libero, in tristique est ante et lacus. Donec eu nisi in augue blandit euismod. Maecenas tristique dapibus dolor, ut placerat nisi vestibulum id. Nulla feugiat, purus vitae auctor cursus, tellus lorem accumsan risus, id accumsan ante nulla id nisl. Proin ut lectus mollis tortor dictum venenatis. Vestibulum quis enim in purus condimentum viverra. Sed consectetur ullamcorper leo, vitae hendrerit sem varius et. Etiam consectetur metus vel dolor posuere eget porttitor metus facilisis. In bibendum, ipsum nec fermentum hendrerit, mi sem consectetur ligula, et luctus purus velit in sapien. Proin eget nibh id magna porttitor accumsan. Morbi scelerisque elementum massa et malesuada. Sed consequat tempor urna blandit egestas. Maecenas bibendum dui ac enim rutrum iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor mattis tellus, ac luctus dui mattis non. Pellentesque imperdiet facilisis orci, consectetur dictum velit eleifend in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pellentesque ullamcorper est. Curabitur vel ipsum sit amet mi porta gravida. Sed ut libero neque, rhoncus eleifend diam.</p>
<p>Donec rutrum, sapien sed laoreet volutpat, quam nisi scelerisque odio, a posuere sem nisl ac justo. Etiam a venenatis elit. Ut mattis, odio aliquam pellentesque fermentum, dui metus interdum dui, a ultricies dolor dui id sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in arcu a velit volutpat sollicitudin. Nulla pharetra diam at nisi varius rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras posuere dignissim velit vel scelerisque. Ut vel nibh nulla. Maecenas eleifend, orci sed cursus tincidunt, diam lectus vestibulum libero, id tincidunt enim mauris quis metus. Praesent ullamcorper accumsan felis, et molestie ligula egestas eget. Morbi auctor placerat sodales.</p>
<p>Aenean euismod commodo sem in ultricies. Sed sed eros sem. Nunc a blandit ipsum. Vestibulum ante urna, vulputate sed pretium eu, posuere a massa. Nunc pellentesque venenatis odio, ac rhoncus odio sollicitudin sit amet. Praesent dui felis, euismod eget tempor vel, mattis et ligula. Vivamus adipiscing pellentesque luctus. Curabitur vitae iaculis nulla. Cras laoreet, urna tincidunt ornare fringilla, odio ante varius mi, ut imperdiet lectus quam vitae magna. Nam sagittis diam sit amet velit tristique lobortis. In hac habitasse platea dictumst.</p>
<p>Duis dapibus molestie neque sed sollicitudin. Duis lorem lectus, gravida ut accumsan sit amet, aliquet sed libero. Aliquam at nisi dolor. Cras vulputate ipsum ut mauris ullamcorper sed elementum neque tristique. Nam enim leo, gravida id sodales id, euismod in lacus. Quisque justo lacus, facilisis dapibus mollis in, rutrum in est. Nullam sit amet nulla ante, non congue sem. Duis id suscipit purus. Nunc pulvinar, mauris sed aliquet aliquet, dolor ipsum suscipit massa, vel sodales mi mi eget ante. Nunc convallis hendrerit luctus. Aliquam accumsan lorem et velit gravida mattis. Donec sed sapien ac magna molestie condimentum. Suspendisse sed orci ac erat dictum laoreet sed vitae sem. Pellentesque quis mi leo. Curabitur pulvinar faucibus dapibus. Praesent id turpis id odio laoreet sollicitudin id non nisi.</p>
<p>Suspendisse malesuada aliquam mattis. Vestibulum iaculis venenatis lectus, nec aliquam nunc ultrices id. Nullam quis nulla in ante rhoncus rhoncus vitae eget odio. Nunc molestie, nunc eu lobortis consectetur, odio mi cursus turpis, sit amet pulvinar arcu leo at diam. Mauris sit amet nibh elementum purus semper venenatis ac et neque. Etiam porta massa felis. Aliquam a urna vel massa facilisis dapibus. Nunc elit velit, ultricies non faucibus vel, cursus dapibus dui. Suspendisse potenti. Duis pretium est elementum leo eleifend tincidunt. Ut facilisis tincidunt orci, vel placerat massa porttitor id. Proin sit amet risus sed eros gravida varius non non elit.</p>
<p>Quisque mattis lobortis auctor. Ut at accumsan libero. Sed tincidunt, erat sed iaculis mollis, libero nulla cursus nunc, quis pellentesque ipsum nibh ac nisi. Nulla facilisi. Vestibulum eget urna et nulla lobortis pulvinar in non ipsum. Praesent interdum lectus quis ligula consectetur vel placerat neque rhoncus. Suspendisse ac erat sed leo eleifend tempus. Donec mi enim, venenatis vitae sodales id, malesuada eget lacus. Nullam tincidunt pulvinar lectus, vitae vehicula purus sollicitudin semper. Etiam et erat mi, egestas egestas dolor. Morbi nisl ligula, dapibus et tristique ut, faucibus vel mauris. Curabitur vel ante dolor.</p>
<p>In a est orci, sit amet suscipit lectus. Ut luctus interdum enim, eu sodales libero malesuada non. Donec sollicitudin risus sit amet mauris pharetra a ultricies neque blandit. Praesent vehicula lobortis vulputate. Etiam at lectus et est viverra facilisis ut id odio. Nulla augue nulla, vehicula vitae sollicitudin at, consectetur ut magna. Integer ac nibh et metus facilisis fringilla. Proin rutrum purus eget risus hendrerit auctor. Nullam mi felis, ullamcorper sed pellentesque a, suscipit quis elit. Morbi laoreet aliquam nisi, sollicitudin molestie ante sollicitudin quis. Nullam et venenatis neque. Donec non hendrerit tortor. Donec commodo magna at arcu luctus nec cursus nulla interdum. Aenean placerat scelerisque ligula, feugiat vestibulum mauris fermentum nec. Phasellus libero dolor, rutrum vitae lacinia quis, pretium non ipsum. Ut eget dolor libero, sed vehicula nisi. Nunc porta nisl non urna congue sit amet malesuada mauris tempor. Sed condimentum lacinia purus at porttitor. Maecenas accumsan lobortis ante at ullamcorper. Mauris augue nisl, tristique eu consequat a, dignissim ac augue.</p>
<p>Duis adipiscing metus velit, quis dapibus diam. Morbi sollicitudin placerat vulputate. Ut ut felis nibh, quis tincidunt massa. Donec eros nisl, scelerisque nec ultricies sed, vulputate a turpis. Integer leo massa, condimentum sed luctus nec, tempor in tellus. Praesent nec leo quam. Sed dignissim imperdiet mollis. In vulputate lorem at magna molestie posuere. Sed ut eros at urna scelerisque tempor. Praesent vel urna purus. Vivamus sed tortor sit amet neque adipiscing porta. Praesent ac egestas tellus. Mauris leo erat, tincidunt eu tincidunt vitae, dictum in purus. Aenean semper, erat quis dapibus ornare, massa dolor ornare diam, a ultricies nunc augue in ligula.</p>
<p>Nulla aliquam velit nec arcu commodo egestas sed in diam. Quisque tincidunt tincidunt odio, vitae pellentesque massa placerat eget. Donec at neque nulla. Ut eget erat quam. Mauris eu pellentesque dolor. Nam facilisis justo a risus elementum interdum. Pellentesque ligula eros, posuere sed hendrerit vitae, lacinia a eros. Sed nec purus lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus non sapien ut erat volutpat viverra vitae at est. Morbi vel pellentesque nibh.</p>
<p>Pellentesque vel magna at augue ullamcorper pretium. Sed lacinia hendrerit vestibulum. Vestibulum rutrum porta placerat. Fusce vitae felis sit amet justo aliquam iaculis in nec dolor. Donec ac ligula neque, sed tristique lorem. In viverra feugiat magna, at hendrerit quam lacinia in. Fusce id dui ligula, ac convallis diam. Fusce tempus, arcu id varius rutrum, metus velit ullamcorper massa, nec posuere nisl eros dictum nulla. Donec eget tincidunt nisi. Nam quam nunc, dapibus quis luctus nec, semper ut nulla. In metus sapien, dictum rhoncus tincidunt eu, lobortis non massa. Maecenas a metus eu dolor dapibus convallis eget pretium tortor. Donec lobortis semper bibendum.</p>
<p>Suspendisse euismod mi non enim posuere venenatis. Quisque sed felis nunc. In sem elit, vestibulum ac euismod vel, condimentum id lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut dignissim faucibus varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar dignissim nulla, vitae rutrum dui cursus dapibus. Maecenas sem arcu, fringilla quis iaculis eget, consequat ac nunc. Vivamus id ligula orci, in interdum lectus. Vestibulum tincidunt lacinia mauris, eget venenatis erat hendrerit sed. Pellentesque non dolor risus. In hac habitasse platea dictumst. Etiam at mi justo. Aenean quis odio sed erat mattis rhoncus.</p>
<p>Aliquam erat volutpat. Aliquam lacinia nisl vel orci egestas id pellentesque purus lacinia. Sed ultricies condimentum mi, sed laoreet purus iaculis nec. Donec et ipsum velit. Etiam tincidunt aliquam tellus sed ornare. Mauris cursus varius odio luctus blandit. Sed vel risus leo. Vivamus fringilla interdum varius. Suspendisse et tortor mi. Fusce ut metus nibh, et fermentum massa. Quisque a enim ac urna interdum rhoncus vel vel nulla. Quisque dictum mauris sit amet mi euismod a semper leo auctor. Etiam faucibus convallis quam, id bibendum dolor ornare vitae. Praesent sed purus non ligula adipiscing condimentum ut non leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div id="footer">
<p><em>© Footer!</em></p>
</div>
</div>
<div id="search-results">
<h2>Search Results</h2>
<p>You searched for <em id="search-term"></em></p>
<p>In a est orci, sit amet suscipit lectus. Ut luctus interdum enim, eu sodales libero malesuada non. Donec sollicitudin risus sit amet mauris pharetra a ultricies neque blandit. Praesent vehicula lobortis vulputate. Etiam at lectus et est viverra facilisis ut id odio. Nulla augue nulla, vehicula vitae sollicitudin at, consectetur ut magna. Integer ac nibh et metus facilisis fringilla. Proin rutrum purus eget risus hendrerit auctor. Nullam mi felis, ullamcorper sed pellentesque a, suscipit quis elit. Morbi laoreet aliquam nisi, sollicitudin molestie ante sollicitudin quis. Nullam et venenatis neque. Donec non hendrerit tortor. Donec commodo magna at arcu luctus nec cursus nulla interdum. Aenean placerat scelerisque ligula, feugiat vestibulum mauris fermentum nec. Phasellus libero dolor, rutrum vitae lacinia quis, pretium non ipsum. Ut eget dolor libero, sed vehicula nisi. Nunc porta nisl non urna congue sit amet malesuada mauris tempor. Sed condimentum lacinia purus at porttitor. Maecenas accumsan lobortis ante at ullamcorper. Mauris augue nisl, tristique eu consequat a, dignissim ac augue.</p>
<p>Duis adipiscing metus velit, quis dapibus diam. Morbi sollicitudin placerat vulputate. Ut ut felis nibh, quis tincidunt massa. Donec eros nisl, scelerisque nec ultricies sed, vulputate a turpis. Integer leo massa, condimentum sed luctus nec, tempor in tellus. Praesent nec leo quam. Sed dignissim imperdiet mollis. In vulputate lorem at magna molestie posuere. Sed ut eros at urna scelerisque tempor. Praesent vel urna purus. Vivamus sed tortor sit amet neque adipiscing porta. Praesent ac egestas tellus. Mauris leo erat, tincidunt eu tincidunt vitae, dictum in purus. Aenean semper, erat quis dapibus ornare, massa dolor ornare diam, a ultricies nunc augue in ligula.</p>
<p>Nulla aliquam velit nec arcu commodo egestas sed in diam. Quisque tincidunt tincidunt odio, vitae pellentesque massa placerat eget. Donec at neque nulla. Ut eget erat quam. Mauris eu pellentesque dolor. Nam facilisis justo a risus elementum interdum. Pellentesque ligula eros, posuere sed hendrerit vitae, lacinia a eros. Sed nec purus lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus non sapien ut erat volutpat viverra vitae at est. Morbi vel pellentesque nibh.</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#search-box a").toggle(function (e) {
e.preventDefault();
$("#search-box").css({ "height": "50px" });
$("#content").css({ "top": "120px" });
$("#search").css({ "display": "block" });
},
function (e) {
e.preventDefault();
$("#search-box").css({ "height": "20px" });
$("#content").css({ "top": "90px" });
$("#search").css({ "display": "none" });
});
$("#search-val").focus(function () {
$(this).select();
});
$("#search-submit").click(function () {
var searchval = $("#search-val").val();
$.blockUI({ message: "<h3>Searching for '<em>" + searchval + "</em>'...</h3>" });
setTimeout("searcher('" + searchval + "')", 2000);
});
});
function searcher(searchval) {
$.unblockUI();
$("#search-term").html(searchval);
$("#main").html($("#search-results").html());
}
</script>
</body>
</html>Demo here
