tags:

views:

480

answers:

3

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 );

}); 
A: 

You need to give #rightDiv a margin-left: 200px and width: 100%.

Daniel A. White
Thanks but doesn't quite work. I get a scroll bar on the main browser window, I think because `rightDiv` is 100% + 200px wide.
Simon Hutton
No rightdiv would only be 100% - 200px.
Daniel A. White
Margins are always added to the width, not subtracted. There's a way around that with css3, but not all browsers support css3.
tybro0103
A: 

Something like this ?

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  <head>
  <style type="text/css">

  * { border:none; margin:0; padding:0;}

  #leftDiv{
      float: left;
      width: 200px;
      background-color:yellow;
  }

  #rightDiv{
      position:absolute;
      left:200px;
      float: left;
      overflow: auto;
      /* width: 50%; */
      background-color:green;
      /*margin-left:202px;*/
      /*width:100%;*/
  }
  </style>
  </head>
  <body>
  <div id="leftDiv">
      Left side bar
  </div>
  <div id="rightDiv">
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
      Some_really_long_content_which_should_make_this_Div_scroll
  </div>
  </body>
Edelcom
That puts the scroll bar on the window rather than the right div.
tybro0103
Which does make sense, no ? Hs is displaying something very unbreakable large, why should the user not be able to see it?I thought your question was just that the right div shouldn't be displayed underneath the left.
Edelcom
Ah yes, I misread his question. The right div should have the scroll bar, not the complete screen. Thought the question was mainly about the right div not being displayed underneath the left div. Don't feel I deserve the down vote, though.
Edelcom
+1  A: 

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"&gt;

<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>
tybro0103
you can get rid of float:left on leftDiv btw
tybro0103
Excellent, thanks a lot. Thought it would need some nested Div's but that was as far as I got!
Simon Hutton