CODEWITHSUNDEEP
jquerycsstwitter-bootstrapresponsive-designsass
am-rails
am-rails

Reputation: 1473

How to create Two Columns with Separate Scrollbars in Responsive Bootstrap?

How can I get 2 columns with scrollbars in Bootstrap on the click of a button? Here are the details:

My page has a row-fluid div which has main-column div in it with main-content and extra-content. I have a button for transferring the extra-content to another div called right-column. (The button also makes right-column larger.) This all works fine.

Before click:

Main-column
M a i n Content Div
E x t r a Content Div

After Click, extra-content goes to right column:

Main-column | Right Column
Main Content | Extra content

I now want the right-column and main-column to each get their own scrollbar after the click, so people can scroll each side separately. However, when I tried adding code to do this, the right column ended up below the main column. I then tried other code, but it did nothing. How do I do this correctly? My code is below.

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: (did nothing).

#right-column{
  overflow: auto;
  width: 50%;
  float: right;
  height: 100%
}

#main-column{
  overflow: auto;
  width:45%;
  float:left;
  height: 100%
}

#parent-column{
  overflow:hidden;
}

Upvotes: 0

Views: 1017

Answers (1)

am-rails
am-rails

Reputation: 1473

This was a (foolish) mistake:

 height: 100%

Once I replaced it with a set height, the scrolling worked.

Upvotes: 1

Related Questions