Tutorials > CSS > Overflow
Specify what should happen when an element's content is too big to fit in a specified area. (An alternative to IFrames.)
Tired of IFrames? The CSS overflow property, which specifies what should happen when an element's content is too big to fit in a specified area, can be used as an alternative.
The DownsideThis property doesn't provide the advantage of quick updates that IFrames do because the frames' content isn't kept in an external file. Therefore, this method is only suggested to be used for content on one page.
Start off by placing the following code in the head section of you page.(between <head> and </head>)
Code:
------------------------------------------------------------------------
<style type="text/css">
div#overflow
{
background-color:#FFFFFF;
width:200px;
height:125px;
overflow: scroll
}
</style>
------------------------------------------------------------------------
(The background color, width, and height properties can be changed to suit your site's needs. Additional properties may be added.)
Next place the following code anywhere between <body> and </body>. (The text can be changed.)
Code:
------------------------------------------------------------------------
<div id="overflow">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla rhoncus.
Fusce in sapien in pede blandit euismod. Integer tincidunt tortor quis turpis.
Vestibulum scelerisque felis non justo. Sed leo magna, lacinia in, mollis
vel, egestas non, dui. Nullam tempus sem quis mi. Cras ac tellus et ligula
porta commodo. Sed quis eros ac ipsum convallis placerat. Aliquam vitae
mauris. In luctus metus sit amet ipsum luctus egestas.
</div>
------------------------------------------------------------------------
Example:
The overflow property has many values that can be used. Experiment by changing the overflow property's current value to: visible, hidden, auto, or inherit.
To change the generic scrollbar to a custom made one, please refer to the Scrollbars tutorial.
