I'd like to use a div within my page that does not take up the whole screen use the scroll bars on the edge of the screen when its content overflows. I know that sounds confusing, so here's an example: http://www.csszengarden.com/?cssfile=/202/202.css&page=1
I would have posted code, but I'm not sure where to start on that. Could someone point me in the right direction with the HTML & CSS?
One trick is to overlay one or more static images or boxes and fix their position, then resize the scrollable area of your entire page, your inner <div>, such that its width fits in the "viewable area" exposed (i.e. not covered) by your overlaid area (you could use padding to achieve this).
I've made a demo page to illustrate this. It does involve extra markup per my suggestion though; I'd wager that more sophisticated CSS is used to achieve the same effect with the same base markup provided by CSS Zen Garden, but my answer is just another simpler way of going about it.
The source code is provided below. The snippet is runnable but as the dimensions are unmodified from the original you will want to view it in full screen to see anything meaningful in action.
body {
margin: 0;
}
h1 {
text-align: center;
}
#overlay div {
position: fixed;
width: 100%;
height: 100%;
background-color: gray;
}
/* The top and bottom "borders". */
#overlay .vert {
height: 150px;
}
/* The left and right "borders". */
#overlay .hor {
width: 300px;
}
/* Anchor the parts of your overlay boxes to the respective edges of the page. */
#overlay-top { top: 0; }
#overlay-bottom { bottom: 0; }
#overlay-left { left: 0; }
#overlay-right { right: 0; }
/* Your content has padding equal to the sizes of your overlay "borders". */
#content {
padding: 150px 300px;
}<!-- This acts as the overlay, or mask, of your content. -->
<div id="overlay">
<div id="overlay-top" class="vert"><