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