Home/ Questions/Q 5978037
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T21:27:24+00:00

I have a very simple layout with 2 DIVS: a fixed width left bar

  • 0

I have a very simple layout with 2 DIVS: a fixed width left bar and a right area which should take up 100% of the remaining width. Both are 100% height, and I want the right item to have a vertical scroll bar if the height is taller than the window height.

My current code takes up the whole browser window, but the right area scrolls way off the browser viewable area to the right, and there is never a vertical scroll bar visible.

HTML:

<body>
    <form id="Form2" runat="server">
        <div class="page">
            <div class="clear hideSkiplink">
                Left side stuff goes here....
            </div>
            <div class="main">
                Right size stuff goes here....
            </div>
        </div>
    </form>
</body>

CSS:

div.hideSkiplink
{
    padding:20px;
    background-color:#990000;
    position:fixed;
    top:0px;
    left:0px;
    width:249px;
    height:100%;
}
div.main
{
    padding: 10px;
    margin: 0px;
    background-color: #000000;
    color: #ffffff;
    position: fixed;
    top: 0px;
    left: 250px;
    width: 100%;
    height: 100%;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you give something width:100% it means ‘whatever the width of my container, I will have the same width’ — it does not mean ‘I will take up 100% of the available space’

    In other words, let’s say your parent DIV was 300 pixels wide — if you give the child div width: 100%, it will be 100% of 300 pixels.

    What you can do here, since your left column is fixed width, is add a left margin to the right div.

    div.left
{
     width: 249px;
}

div.right
{
     width: 100%;
     margin-left: 249px;
}
    • 0