Div's side by side with varied width Div scrollable
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>
&l开发者_StackOverflow中文版t;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 );
});
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>
You need to give #rightDiv a margin-left: 200px and width: 100%.
Something like this ?
<!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>
加载中,请稍侯......
精彩评论