design reverb

The html is just three divs: header, content and footer. Here’s a quick look at the css for the header and footer:

#header {
background-color:#000000;
color:#ffffff;
top:0;
position:fixed;
height:80px;
width:100%;
}

#footer {
background-color:#000000;
color:#ffffff;
bottom: 0;
position: fixed;
height:80px;
width:100%;
overflow: hidden;
z-index: 100;
}

We use position:fixed so that both the footer and header remain in place as the page is scrolled and to keep the position relative to the browser window no matter what positioning the parent element has. Using the offset properties top and bottom, we tell the browser specifically where to position these elements. Using top and bottom on the #content element, we imply a height for the element.

#content {
padding:0;
margin: 0;
top:80px;
bottom:80px;
position:fixed;
width:100%;
overflow:auto;
}

Then if you like, you could use a server side include (SSI) for the content, as I have done here: http://designreverb.com/test_noFrames.php. Here I have the same header, content and footer divs. The content is being called from another page: some_content.shtml. (The page could just have easily been .htm, .php, .html …etc. )

<div id="content"> <p>content</p>
<?php include 'some_content.shtml'?>
</div>

This works great, but you’re ‘test_noFrames’ page will have to be a .php file (test_noFrames.php instead of test_noFrames.htm) like this: http://designreverb.com/test_noFrames.php and http://designreverb.com/some_content.shtml (these url’s ar live so check them out)

NOTE: This has only been tested in IE7 and Firefox 2.0.
Questions? Comments? Lemme know.