Just wondering if this is achievable, so I thought I'd inquire.
I've got a div layout with two columns inside a container. They're aligned using inline-block and percentage widths.
The basic structure looks like this
<div id="containter" style="width:100%">
<div id="leftDiv" style="width:20%; height:100%; display:inline-block; overflow-y:scroll">
List of Content
</div>
<div id="rightDiv" style="width:80%; height:100%; display:inline-block; min-height:500px; vertical-align:top">
Some expanding information
</div>
</div>
This setup is working fine. However, my issue lies in the fact that the left column has an overflow while the right column has a minimum height set. The goal is for the list in the left column to never exceed the containing div's height but rather fit into it at 100% and scroll when needed.
On the other hand, I want the content in the right column to be able to expand the height of the container as it grows, maintaining a minimum height of 500px and allowing the left column to grow along with it.
Currently planning to implement a JavaScript solution, but curious if achieving this purely through CSS is possible. Maybe there are some new features in CSS3/HTML5 that could assist?
Appreciate any insights you have on this matter.