Question

I want to create a two column layout with the right floated column containing a div that becomes scrollable once its content overflows the browser window height.

This is the html code that I am working on:

<div class=container>
 <div class=column_A>A</div>
 <div class=column_B>B
  <div class=content>C<br><br><br><br><br><br><br><br><br>
   <br><br><br><br><br><br><br><br><br><br><br><br><br>
   <br><br><br><br><br><br><br><br><br><br>C
  </div>B
 </div>
</div>

And this is the css code:

.column_A {
 float: left;
 border: black solid 2px;
 height: 500px;
 width: 65%;
 background: red;
}

.column_B {
 float: right;
 border: black solid 2px;
 width: 30%;
 background: blue;
}

.content {
 border: white solid 3px;
 overflow: auto;
 background: green;
}

The scroll is currently on the browser window, how do I transfer it to the content?

Answer 1

You use overflow: auto like this:

.column_B {
   float: right;
   border: black solid 2px;
   width: 30%;
   background: blue;
   overflow: auto;
   height: 600px; /* ? */
}

You need to specify the height for your right column, though.

EDIT: To answer your comment, the easy way to go about it is if you set your document body’s height to 100%, like this:

body {
  height: 100%;
}

Then use a custom percentage to set the column’s height to your liking.

.column_B { 
   ...
   height: 99%; /* or whatever you need */
   ...
}