How to make a scrollable box

A reader of my blog Testing Blogger Beta asked how to make scrollable box or scroll down box (or scroll box, I don't know what exactly to call it). To see what I mean by scrollable box, surf over to this post: Testing adding of Google AdSense search box in Blogger Beta. There are some scroll boxes there in which I had to put some HTML codes, which if done any other way, will cause the sidebar to slide the bottom of the page because it is too wide for the main column width.

One of the way do this is to paste this code in your post editor (there is another way further down the post):

<div style="overflow:auto; height:300px; width:400px">
<table cellpadding="0" cellspacing="0" style="width:250px;">
<tr>
<td>Put your stuff here</td>
</tr>
</table>
</div>

Type or paste whatever text or HTML you want in the place where you see "Put your stuff here" (and of course then delete "Put your stuff here" and publish your post).

Note: The width and the height of the box can be changed by changing the numbers in height:300px; width:400px". Note also that there is a large space above the first line of the text. I don't know what is causing this, and am trying to find a solution to it. When I do, I will put an update or redo the post. The trouble is, I am trying to do so many things at the same time. If this is troubling you, do remind me.

UPDATE: 21 November 2007: A blogger provide the solution by putting all the codes in a single line. Read the comments. There is also a second solution. Read another update lower down the post

The reader also ask if that will work for pictures. That is an interesting question. I will have to test it. (This has been done. See post Testing if scroll box works for images. (Click the "back" button to get back to this page).

UPDATE: A reader of this post has commented and given a link to a scroll box generator. For that generator, you will have to enter variables like width of box (important), height, font size, color, etc. I have tried it and it works. But haven't had the time to test it more thoroughly. The generator is at this site: Scrollbox Generator. (Close the new window to get back to this page). The tip is given by Luigi who have made a scroll box here: Trovamiunnome (close new window to get back to this page).

If you surf to that scroll box generator, you will see the variables you will have to select in the screenshot below:

<div style="width: 395px; height: 400px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;"></div>

copy from the file, paste it into the post editor, adjust the width: 395px; height: 100px; to suit the occasion and paste the codes I want to display just before the last </div> tag.

To make it clearer, I will put in some text in red where you are supposed to type or paste what you want to appear in the scroll box:

<div style="width: 395px; height: 400px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;">Paste what you want to appear in the scroll box here</div>

UPDATE: 21 November 2007: What I have been doing for a long time is to generate the script once, save it into a Notepad file. Now whenever I need a scroll box, I just open the Notepad file, copy-paste the script into the post editor window, edit the width and height according to what I want (the width will normally depend on the width of the main column, ie., posts while the height will depend on the length of the stuff I put inside the scroll box and/or how high I want the scroll box to be. If you don't know the width of the template you use for your blog, refer to How to find the widths of the blog Header, main column (posts), sidebar of your blog (click BACK button to get back to this page)

Update 27 July 2007: A reader has asked if the scroll box border color can be changed. That is very easily done if you use the scroll box generator mentioned above. If you look at the screenshot, at the last line, you have the choice to chose the border color. You can either "select from chart" or enter a hexadecimal color code for a greater variety of colors. If you chose the last option, the free ColorPic tool will be very handy. Type or copy-paste "colorpic" into the search box above, tick "Web" and search. I believe the site from where you can download the tool will be the first result of the SERP (search engine result page)

RELATED POST:

Scroll box FAQ

NEWER POST

OLDER POST