This is a bunch of text that will be in the left box. If this text wraps and ends up being taller than the box, it will force the box to have a scrollbar. Resize your browser up/down to make the scrollbar appear.

Note: I made this a fixed box, and IE is broken so it won't work in IE, try a real browser.

It should be 50px from the top and bottom of the browser pane and 200px wide. That can be fixed by using this, but I didn't feel like it for this quick demo.

This box has the overflow set to hidden, so anything that doesn't fit in the box will be chopped off. Very rude, don't you think? So have you heard the latest? Well, let me tell you, this is fascinating... anyway, where was I? Oh yes, so I heard... ah, forget it.

This is a box that will be in the middle of the page. It is 200px down from the top, 200px over from the left, and it is 200px wide and 200px high.

This is some more text.

FNORD

King Kong died for your sins.

You know, I made a typo while writing part of the main entry. I typed 'onlick' instead of 'onclick' - and then I wondered what kind of user interface would use an 'onlick' event handler...

OK, this is yet more text - just putting in more stuff to make it scroll.

This is another 200px x 200px box, but this time it is to show that you can have horizontal scrolling too!

Wheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee-thud!

Wasn't that fun?

Of course, you can have both horizontal *and* vertical scrolling in the same box if necessary.

If things are too wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide.

Or, perhaps...
T
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
L!

These are the style rules used in this document - view the source for more details:

<style type="text/css">
body { padding: 0px; margin: 0px; color: #000000; background: #ffffff; }
p { padding: 0px; margin: 5px; }
#left_box { position: fixed; top: 50px; bottom: 50px; left: 0px; width: 200px; overflow: auto; background: red; }
#top_box { position: absolute; top: 50px; left: 200px; width: 200px; height: 150px; overflow: hidden; background: orange; }
#middle_box { position: absolute; top: 200px; left: 200px; width: 200px; height: 200px; overflow: auto; background: blue; }
#bottom_box { position: absolute; top: 400px; left: 200px; width: 200px; height: 200px; overflow: auto; background: yellow; }
#right_box { position: absolute; top: 50px; left: 400px; width: 200px; height: 550px; overflow: auto; background: green; }
#style_box { position: absolute; top: 600px; left: 200px; background: #ffffff; z-index: 10; }
</style>