Saturday, September 02, 2006

CSS Overflow Property

I'm working on a site where visitors will be able to upload their own images, which I will then be displaying. In order to keep page formating, I'll be automatically resizing the images to 125 pixels in height. The image itself will be placed in a 125x125 div. But what if it's wider than 125? I wanted it to be cropped so as not to mess up the page format. Enter the overflow property
<div style="height:125px;width:125px;overflow:hidden;">
Overflow has other parameters as well:

overflow: auto - This will insert a scrollbar - horizontal, vertical or both only if the content in the block requires it. For practical purposes, this is probably the most useful for creating a scrolling area.

overflow: scroll - This will will insert horizontal and vertical scrollbars. They will become active only if the content requires it.

overflow: visible - This will cause the block to expand to view the content.

overflow: hidden - This forces the block to only show content that fits in the block. Other content will be clipped and not hidden with no scrollbars.

No comments: