The CSS overflow
The CSS overflow property tells the browser what to do with
excess content, content that won't fit within a specific
area.
We'll use the div tag in our examples. Areas can also be
defined by the p and other tags where height and width can
be specified.
Much of the same visual effect the CSS overflow property
provides (except allowing content to flow outside the area)
could be provided with an iframe. The iframe, however,
requires an extra content file. Using CSS, the content
can all be in the same web page source code file.
What the CSS overflow Property Does
The CSS overflow property tells the browser what to do when
content does not all fit within the area defined for it.
The choices are to print the content anyway (let it flow
outside the area) or to clip the content so the excess is
invisible. If the content is clipped, there is a further
choice whether or not to provide a scrollbar so the
invisible content can be scrolled into visibility.
Some Reasons To Use the CSS overflow Property
These examples may stimulate your own creativity, as you
realize some of the things that can actually be done.
A. To publish lots of content in a relatively small amount
of space.
When the feature list is large or the testimonials many, and
the amount of space available on the page is not that much,
the content can be put into a div with specific width and
height dimensions. Use the overflow property to create
scrollbars.
Now, site visitors who are interested can read the content,
even though it is in a small area, and those who are not
interested can continue reading the rest of your enticing
copy.
B. To keep variable content in its allotted space.
When Handy Spot Editor
or other software is used to update the content in one
section of the web page, it may be impossible to predict
how much content will be published.
With the CSS overflow property, the content can be put into
a div with specific dimensions. When the content is more
than the area can contain, scrollbars are automatically
provided to allow the reader to view all of the content.
C. To display only the top-left part of an image.
There may be occasions when you want to make only the
top-left part of an image visible. Maybe it's to be used
as a thumbnail, maybe the image is obviously incomplete to
entice click-throughs, maybe some other reason.
Whatever the reason, the CSS overflow property can cause
the image to be clipped wherever it exceeds the dimension of
the div it is published within.
Using the CSS overflow Property
The overflow property has one of 4 values:
visible — This is the default. Excess content flows
outside the area.
scroll — Excess content is clipped at the edges of the
area. A scrollbar is provided whether or not there
is excess content.
auto — Excess content is clipped at the edges of the
area. A scrollbar is provided only when there is
excess content.
hidden — Excess content is clipped at the edges of the
area. No scroll bar is provided. Excess content remains
invisible.
To use the CSS overflow property, assign a value to the
property in the same way values are assigned to other CSS
properties. When no value is assigned to the overflow
property, "visible" is assumed.
Here is an example.
<div style="overflow:hidden; width:100px; height:75px;">
Overflow content can be clipped.
The clipped content can remain invisible.
</div>
The above clips the text that doesn't fit within a 100 x 75
pixel area.
Here is another example.
<div style="overflow:auto; width:100px; height:75px;">
Overflow content can be clipped.
Scrollbars can make clipped content visible.
</div>
In the second example, the scrollbar can be used to scroll
the clipped content into view. With the "auto" value, the
scrollbar is present only when content is clipped. To always
print the scrollbar, use "scroll" as the overflow value.
You now have an awesome tool at hand to control the
appearance of content to make your web sites even more
professional, interesting, and appealing.
Will Bontrager
©2008 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
