I'm facing a common issue with a unique twist in my web application development using Bootstrap.
In my layout, I have a top bar for actions and a left-side navigation bar for moving between pages. The content of the page is always positioned in the bottom-right part of the screen, covering about 80% of the area.
For a specific page, I need to create a two-column layout with independent scroll bars. On the left side, I want to show a task list, and on the right side, I want to display boxes (two wide) representing my employees with their assigned tasks. I aim to navigate through the task list separately from the employee list.
Here is a basic mock-up of what I envision: https://drive.google.com/file/d/0BwbWwcCjL9EJT1B5MlFMQVh0UnM/view?usp=sharing
Is it feasible to achieve this layout within the constraints of Bootstrap? Currently, my task and employee lists extend beyond multiple page lengths, making interaction difficult. I hope to confine them within the browser window and provide individual scroll bars for each list to enable tasks to be moved smoothly across various employees.
Thank you.