Columns in HTML/CSS + scroll - html

Question

I need to know how to display text in columns inside a horizontal scrolling box.
Basically I have a 600x300 box, and each bit of information is given inside a column, like;
Column 1... Column 2 .... Column 3
Para 1..... Para 2 ...... Para 3
Without the dots.
The thing then has to be contained within a horizontal box.
So how is this done?
I used something like the following to create the columns:
<style>
.column {
width:200px;
float:left
}
</style>
<div class="column">
<h2>header text</h2>
<p>paragraph text What if this is longer</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
But I cant' figure out how to contain this all within a box that can scroll horizontally

Answer 1

Add overflow-x: scroll to your CSS definition.

Answer 2

Put it in a container that has white-space:nowrap and make the columns display:inline-block
.column-container{
white-space:nowrap;
}
.column {
width: 200px;
display:inline-block;
vertical-align:top;
white-space:normal;
}
<div class="column-container">
<div class="column">
<h2>header text</h2>
<p>paragraph text What if this is longer</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
</div>