Home/ Questions/Q 546527
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T10:52:34+00:00

I want to have two div’s side-by-side with the left one fixed and the

  • 0

I want to have two div’s side-by-side with the left one fixed and the right one filling the rest of the screen.
However, when the right div contains content which goes beyond its available width, the right-hand div should not drop below the left Div but become scrollable. That is, the two Div remain side-by-side and the right Div has a scroll bar.

Setting a width % on the right div sort of shows what I’m after but the right Div never fills the remaining space, its like you need to set the right Div width to 100% – leftDiv.width…

Here’s what I’ve got.

Thanks

<style type="text/css">
#leftDiv{
    width: 200px;
    float: left;
} 

#rightDiv{
    float: left;
    overflow: auto;
    /* width: 50%; */
}
</style>

<div id="leftDiv">
    Left side bar
</div>
<div id="rightDiv">
    Some_really_long_content_which_should_make_this_Div_scroll
</div>

EDIT

I can get the effect I’m after with some jQuery like this but I’d prefer a css only solution.

$(window).bind('resize', function () {
    $('#rightDiv').width($(this).width() - 220 );

});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Wow, this is a tough one. Most websites have fixed width to avoid such issues.

    I believe the following is what you want. I’ve tested it in firefox, ie, and safari. You’ll have to mess around with the height to get that perfect for ie.

    Note: I’m not sure how this will work for other doctypes.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>foo</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>
<body>

<style type="text/css">
    * { 
        border:none;
        margin:0;
        padding:0;
    }

    #leftDiv {
        float: left;
        width: 200px;
        background-color:lightgreen;
        position:absolute;
        top:0px;
        left:0px;
    }
    #rightDiv {
        width:100%;
        background-color:lightblue;
    }
    #padder {
        padding-left:200px;
    }
    #content {
        width:100%;
        height:100px;
        background-color:lightyellow;
        overflow:auto;
    }
</style>

<div id="leftDiv">
      Left side bar
</div>
<div id="rightDiv">
    <div id="padder">
        <div id="content">
            right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_
        </div>
    </div>
</div>

</body>
</html>
    • 0