Vivek Soni

Scroll area with overflow in CSS in FF

Small Scrollable Areas Scrollable areas on webpages has become increasingly popular after being used by some leading design communities on the internet. Scrollbars can be done with a textarea or iframe tags, but a more frequent way of doing it is through using the abilities that already lies within HTML and CSS for any page [...]

Small Scrollable Areas

Scrollable areas on webpages has become increasingly popular after being used by some leading design communities on the internet. Scrollbars can be done with a textarea or iframe tags, but a more frequent way of doing it is through using the abilities that already lies within HTML and CSS for any page element.

A normal block element, like a <div> can be set to a certain height and width. What happens when the content of the DIV exceeds the size given to it?

Enter the CSS property ‘overflow’.

• overflow: auto – This will create a scrollbar – horizontal, vertical or both only if the content in the block requires it. For practical web development, this is probably the most useful approach to creating a scrollbar.
• overflow: scroll – This will will insert horizontal and vertical scrollbars. They will become active only if the content requires it.
• overflow: visible – This will cause the content of the block to expand outside of it and be visible at the same time.
• overflow: hidden – This forces the block to only show content that fits in the block. Other content will be clipped and not visible. There will be no scrollbars.

CSS:

<style type="text/css">
<!--
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
-->
</style>

HTML:

<div>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>
<span style="color: red;">This is red color</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>This is a normal paragraph.
<span style="font-weight: bold; font-size: 22px;">This is big bold text</span>
</p>
<p>This scrolling are can contain normal html like <a href="index.php">link</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>

(0) Comments Permalink