Scroll Box

Creating Your Box

Determine how big you'll need your box in both width and height to accommodate your contents; include in your estimation the height of the bottom scrollbar, as it will fill a small portion of the bottom of the box.

Vertical Scroll Box

To make a scroll box with a vertical scroll, you need to use overflow-y:scroll; This tells your browser to create scroll bars on the y (vertical) axis whenever the contents of the container is too big/high. ,.

I add overflow:scroll before the overflow-y:scroll and overflow-x:hidden.
I do this in case the browser doesn't recognize the overflow-y property

Code:

<div style="border:5px ridge LimeGreen; padding:5px; width:150px; height:50px; overflow: scroll; overflow-y: scroll; overflow-x: hidden;">
your about me goes here
</div>

Horizontal Scroll Box

To make a scroll box with a horizontal scroll, you need to use the overflow-x property. Specifically, you need to use this code: overflow-x:scroll;. This tells your browser to create scroll bars on the x (horizontal) axis.

By using overflow-x, we can create scroll bars when the contents of this div are wider than the container...To prevent vertical scroll bars from appearing, you need to use overflow-y:hidden; (the overflow-y property defines the vertical overflow). .

Code:

<div style="border:5px ridge LimeGreen; padding:5px; width:150px; height:100px; overflow-y: hidden; overflow-x: scroll;"> <p style="width:2505;">
your about me goes here
</p> </div>

Styling Your Box

However, you can use a table to create cells, designing a sort of modular side-scrolling layout. For instance, if you wanted four cells within your side scrolling box, each 200 pixels tall by 350 pixels wide, your HTML would look like this:

Cell 2

Cell 3

Cell 4

Code:

<div style="border:5px ridge LimeGreen; padding:5px; width:350px; height:230px; overflow-y:hidden; overflow-x:">
<table width="1400" height="200" border="1" cellpadding="10" cellspacing="0">
<tr>
<td height="200" width="350">Cell 1</td>
<td height="200" width="350">Cell 2</td>
<td height="200" width="350">Cell 3</td>
<td height="200" width="350">Cell 4</td>
</tr>
</table>
</div>

If you want to add more design in your scroll box, see the box shadow, border, background.