Home/ Questions/Q 928137
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T19:57:43+00:00

I am dealing with a pretty standard (or so I thought) page. What I

  • 0

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:
alt text

Here is what it looks like when my sub content is wider than the page:
alt text

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…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Adding to your table a table-layout: fixed styling should achieve what I believe you are wanting. Add it either inline (like you are already doing) or as part of your css (what I would consider the better way).

    Explanation: Your issue resides in the fact that the div is in a table, which by default a table cell expands to fit its content. Setting the table so that it remains a fixed size by using the table-layout property prevents the table from increasing size. Of course, the scroll bar that comes from it will actually be on the table, not the div.

    • 0