Marusya's School Notes

Overflow With Scroll

This example demonstrates how to show the overflow property by creating a scroll bar when an element's content is too big to fit in a specified area.

HTML file:	Displayed by browser:
<style> div.scroll { background-color: #00FFFF; width: 100px; height: 100px; overflow: scroll; } div.hidden { background-color: #00FF00; width: 100px; height: 100px; overflow: hidden; } </style> <body> <p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p> <p>Result with overflow:scroll</p> <div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div> <p>Result with overflow:hidden</p> <div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div> </body>	The overflow property specifies what to do if the content of an element exceeds the size of the element's box. Result with overflow:scroll You can use the overflow property when you want to have better control of the layout. The default value is visible. Result with overflow:hidden You can use the overflow property when you want to have better control of the layout. The default value is visible.

HTML file:

Displayed by browser:

<body>
<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>

<p>Result with overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

<p>Result with overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</body>

The overflow property specifies what to do if the content of an element exceeds the size of the element's box.

Result with overflow:scroll

You can use the overflow property when you want to have better control of the layout. The default value is visible.

Result with overflow:hidden

Why anyone would use the hidden overflow is beyond me! Unless you resize the box to see more words but then, people who have big text settings on their computers will not be able to see the hidden contents. I cannot see it yet, but there must be a purpose for a hidden overflow...