I have been searching high and low for similar questions, but to no avail. So, I am laying out my problem here in the hopes that you could guide me on what I might be doing wrong and how to rectify it. The scenario I am trying to achieve is having two divs side by side, each using 100% of height and width. One of the divs should be scrollable while the other has a stack of divs with the last one also being scrollable.
A visual representation of this scenario can make things clearer:
The blue divs are the ones that need to be scrollable, while the height of the red divs is unknown. I managed to partially achieve this setup, but the issue is that when the content of the last div is scrolled, it gets pushed down out of view at the same rate as the combined height of the red divs. This means that the user scrolling the blue div won't be able to see all of its contents. How can I solve this conundrum? You can replicate this behavior on the following Fiddle: http://jsfiddle.net/d3dNG/3/ Thank you in advance for any feedback provided.
Here is the HTML code snippet:
<div class="container">
<div id="left">
Left (first)<br />
[...]Left<br />
Left (last)<br />
</div>
<div id="right">
<div id="header1">Header 1</div>
<div id="header2">Header 2</div>
<div id="header3">Header 3</div>
<div id="rightContent">
Right (first)<br />
Right<br />
[...]
Right (last)<br />
</div>
</div>
</div>
And here is the CSS styling applied:
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.container {
height: 100%;
width: 100%;
background: pink;
}
#left {
float: left;
width: 100px;
height: 100%;
overflow-y: auto;
background: gold;
}
#right {
height: 100%;
width: 100%;
}
#rightContent {
height: 100%;
overflow-y: auto;
background: lime;
}