All geek questions in one place

Div side by side with different width div scrollable

I want to have two divs side by side with the left fixed and the right filling the rest of the screen. However, when the right div contains content that goes beyond its available width, the right div should not fall below the left Div, but become scrollable. That is, both Divs remain side by side, and the right Div has a scroll bar.

Setting the% width on the right side of the div shows what I need, but the right Div never fills the remaining space, as you need to set the right Div width to 100% - leftDiv.width ...

Here is what I have.

thank

<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 that I get after some jQuery, but I would prefer only a css solution.

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

});
+3
3

, . , .

, , . firefox, , . , , .

. , .

<!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>
+6

#rightDiv a margin-left: 200px width: 100%.

-1

Something like that?

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <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>
-1
source

Source: https://habr.com/ru/post/1728639/

More articles:


All Articles