The Problem Of Large Content

Sometimes you just have more content than you have space. Say you have a large map or image, but can only allow a small space in which to view it. What do you do.

Frames and inline frames have been an answer. But, CSS provides many simple answers from two-dimensional scrolling to simple clipping. They all deal with a little-used CSS property called "overflow:".

The "overflow:" property controls what happens to excess content when it won't fit into it's assigned <div>. By default, the <div> will expand to include all of the content nested in it. There are several other options.

Overflow Values

Lets begin studying "overflow:" by getting a picture like the one below:

The above is simply an <img> centered by being put in a <div>. There is no styling for the <div>:

<div align="center" id="box">
<img src="frightenedkitty.jpg">
</div>

Now lets begin styling the above image. The image is 450x402 pixels. Lets say I want to put it in a 200x200 pixel box. That will leave a lot of content left over. I can handle this by clipping the excess content with "overflow: hidden". Here's the styling code:

#box{
width: 200px;
height: 200px;
overflow: hidden;
}

And, here's what the effect would be (note that I have to use different IDs for each example):

A very popular effect is to make the box scroll. This is particularly helpful for maps as it produces smooth scrolling over a large image. Here's the code that would allow us to scroll over our kitty:

#box{
width: 200px;
height: 200px;
overflow: scroll;
}

Below is the effect:

Note that the scrollbars are styled according to the window's styling. Black in this case. This effect has innumerable uses as it can replace the inline frame in most cases. Isn't it unbelievable how easy this scrolling effect is? And, it works in IE, Netscape, and Opera.

I've used these CSS scrolling boxes to put forms in a small corner of a page. All this works with data other than images. I'm just using an image as an example.

There are a couple of other values. The "auto" value will add scrollbars only when they are needed. This can be handy for boxes holding slideshows where only a few images really need the scrollbars. For images that fit, the scrollbars disappear. This value is written "overflow: auto;".

Another value is "inherit". This causes the <div> to inherit dimensions and overflow values from the parent element - a box it might be nested in.

Finally, there is the default value of "visible". This has the <div> resize itself to contain all of the content and make it visible: "overflow: visible;" . It's sort of the opposite of "overflow: hidden;".

Summary & Exercises

Get a large and a small image and make a simple box styled with dimensions and "overflow:" . Try out all of the values. Note how each value works. They are all used regularly.

To Advanced CSS Review

Back To Advanced CSS Index