You should be quite familiar now with creating a vertically scrolling textbox. This time we'll look at how to create an illusion of a single, horizontal scrolling text box, like this:

Box 1

Box 2

Box 3

First, create the outer container box with the dimensions you want your actual box to be:
< div style="background:#FFFFFF;border:2px solid #B85C8A;height:140px;width:140px;overflow:auto;" >
 

Container with "overflow:auto'"

Now add in the inside containers. For the moment, use a color other than your background so that you can adjust the dimensions if need be:
< div style="background:#FFFFFF;border:2px solid #B85C8A;height:136px;width:136px;" > Box 1 < /div >

The first inside container is simple, you just need to remember to reduce the dimensions by 2 times the border width for height and width, i.e if outside container is 140px with a border of 2px. 2 times border width is 4px, so the inside containers will be 136x136 px

< div style="background:#FFFFFF;border:2px solid #B85C8A;height:136px;width:136px;margin-top:-140px;margin-left:140px;" > Box 2 < /div >

< div style="background:#FFFFFF;border:2px solid #B85C8A;height:136px;width:136px;margin-top:-140px;margin-left:280px;" > Box 3 < /div >

Then, you need to add in margin adjustments. Use margin-top: -___px, with a value that is equal to teh height of your outside container.
Use a positive margin-left value equal to your outside container for the first extra box, then double for the second, triple for the third and so on.

< div style="background:#FFFFFF;border:2px solid #B85C8A;height:136px;width:136px;margin-top:-140px;margin-left:140px;" > Box 2 < /div >

< div style="background:#FFFFFF;border:2px solid #B85C8A;height:136px;width:136px;margin-top:-140px;margin-left:280px;" > Box 3 < /div >

Place this code inside your container.

< div style="background:#FFFFFF;border:2px solid #B85C8A;height:140px;width:140px;overflow:auto;" >

< div style="background:#FFFFFF;border:2px solid #B85C8A;height:136px;width:136px;" > Box 1 < /div >

< div style="background:#FFFFFF;border:2px solid #B85C8A;height:136px;width:136px;margin-top:-140px;margin-left:140px;" > Box 2 < /div >

< div style="background:#FFFFFF;border:2px solid #B85C8A;height:136px;width:136px;margin-top:-140px;margin-left:280px;" > Box 3 < /div >

Now for cosmetic changes.

Change the border color of the inside boxes to either the background color or transparent. Kepp in mind that if you use padding, the dimensions of the box will not be exactly the same as the px value you choose.