Overflow
Every now and then your content for a given area may just not fit in the space you need it to. Be it text or images or what have you, you still need to have a way to display it or just make it disappear. This is where the overflow property starts to shine.
Remember this picture from clipping? Well maybe I don't want to crop away parts of the image just so it will fit in the content area I have for it here. I want you to still be able to see the whole image but making it smaller to fit would reduce the images details to unacceptable. Overflow will give us a way to do this without destroying the images quality.
width:405px;
height:270px;
overflow: auto;
}
The code above is what I used to create a box to contain the picture of Stan cat. The overflow: auto; is the property and value that controls what happens to anything that doesn't fit into that fixed size box. In the case of the auto value used here, the browser will automatically add vertical or horizontal scroll bars as needed. There are a few more values you can also use as you'll soon see.
width:405px;
height:270px;
border:2px solid #FF6666;
overflow: visible;
}
Now the visible value will, just as you would think, make the overflow visible. Depending on the browser you're using, the container will either be increased in size to hold the content or the size will be maintained and the overflow shown outside of it. I put a border around this division so you can see how it's effected by different browsers. Try opening this page in both Internet Explorer and Fire Fox and you'll see what I'm talking about.
width:405px;
height:270px;
border:2px solid #FF6666;
overflow: hidden;
}
This is some text to demonstrate what happens to text that doesn't fit within it's parent element.
hidden does just what you think, hides whatever doesn't fit in the box weather it's a picture, text or other items.
width:405px;
height:270px;
overflow: scroll;
}
This is some text to demonstrate what happens to text that doesn't fit within it's parent element.
scroll adds both horizontal and vertical scroll bars whether they're needed or not. Auto is probably a better choice. That is unless you want to needlessly display scroll bars for some reason.
That's all there is for overflow. Not to bad to learn and a handy little thing to know in some situations. Now that we know how to present all our pretty content to our audience, lets learn how to control their printing of it.
