Is there a way to create 2 columns with scrollbars using Bootstrap when a button is clicked? Here's what I'm trying to achieve:
My webpage consists of a row-fluid div that contains the main-column div with main-content and extra-content. There's a button that moves the extra-content to another div called right-column (and also enlarges it). This functionality is working correctly.
Before clicking the button:
Main-column
Main Content Div
Extra Content Div
After clicking the button, the extra-content moves to the right column:
Main-column | Right Column
Main Content | Extra content
Now, after the click, I want both the right-column and main-column to have their own scrollbars so that users can scroll each side independently. However, my attempts at adding this feature resulted in the right column appearing below the main column. Subsequent attempts with different code yielded no results. How can I accomplish this correctly? Here's my code:
HTML:
<html>
<body>
<div class="container-fluid">
<div class = "row-fluid" id="parent-column">
<div class = "span8" id="main-column">
<div id="main-content">
<p>Lorem ipsum...</p>
</div>
<div id="extra-content">
<span class="btn" id="two-column-button">Two-Column</span>
</div>
</div>
<div class = "span1" id="right-column">
</div>
</div>
</div>
</body>
</html>
Second Attempted CSS: (had no effect).
#right-column{
overflow: auto;
width: 50%;
float: right;
height: 100%
}
#main-column{
overflow: auto;
width:45%;
float:left;
height: 100%
}
#parent-column{
overflow:hidden;
}