I am dealing with a pretty standard (or so I thought) page. What I would like to do is allow the page to have it's width determined by the <body> tag and a top level .page style that I've defined in my css. My site has a left navigation pane that is ALWAYS a certain width. The "content" area stretches with the page and should determined by the remaining space that consumes the users screen.
I'd like to show scrollbars on content that does not "keep the peace" with my floating area width. For example, I've recently come upon a series of sub elements that need scrollbars displayed to keep the page from stretching off into eternity.
Here is a simple image of how things look when scrollbars aren't needed:
Here is what it looks like when my sub content is wider than the page:
What I'd like to do is show scrollbars on the red sections when they fulfill their allowed space (including margins and padding). I would like for everything to be padded nicely against the blue section so that the yellow and white sections don't get overlapped.
I've attached the html that I used to make up this display, because I couldn't think of a better way to describe my approach:
<html>
<head>
<style type="text/css">
body
{
background-color: gray;
}
.page /* page is always centered on screen */
{
background-color: white;
width: 90%;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
.nav-pane /* navigation pane is always 100px */
{
width: 100px;
height: 100%;
background-color: green;
}
.nav-pane > div
{
width: 100px;
}
.content-pane /* content pane should size with page */
{
background-color: yellow;
margin: 10px;
}
.content-pane > div /* !!! SHOULD NOT STRETCH !!! */
{
position: relative;
overflow: auto;
background-color: blue;
padding: 10px;
margin: 10px;
color: white;
}
.content-pane > div > *
{
clear: both;
}
.content /* content div holds tables, images, paragraphs, etc.. */
{
background-color: red;
float: left;
margin-bottom: 20px;
}
#small /* one is small */
{
width: 200px;
}
#big /* one is BIG! */
{
width: 4000px;
}
</style>
</head>
<body>
<div class="page">
<table width="100%" style="border: solid black">
<tr>
<td class="nav-pane">
<div>
I am the nav-pane
</div>
</td>
<td class="content-pane">
<div>
I am the content pane
<h2>I am a heading</h2>
<div class="content">
<div id="small">Scrollbar not needed</div>
</div>
<h2>I too am a heading</h2>
<div class="content">
<div id="big">I require a scroll bar to keep this page pretty... :(</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Is what I'm trying to do even possible without using javascript?
Thanks in advance for any insight...