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:

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 websites even more professional, interesting, and appealing.

Will Bontrager