CSS is normally meant to keep a series of html pages consistent across a web page. However, this might become a problem if, say, you want to post the script for your podcast, but your normal page layout won’t hold nearly that much. Or maybe you have an update page that varies unpredictably in size, and you need your page to compensate without you having to upload and test your webpage eight-thousand times.

This is where the CSS overflow property comes in handy. By setting this as an element in your divs, you can define how your pages will hold extra content that normally wouldn’t fit.

Overflow: visible is the default, which isn’t terrible…unless you didn’t plan for your content to spill over so much. Then your material can go in weird places or make your scheme look clunky, which we want to avoid.

If you don’t really care what happens to the excess, then overflow: hidden is a good idea. I’d mostly suggest this for layout choices. For example, if you want to let a background image that might be larger than the variable div (if it has a percentage width, for example) that contains it get cut off rather than cause trouble, this might be a good idea to put in that div.

Overflow:scroll also hides the content, but adds a scrollbar so the reader can get to the overflowing content. This might be good if you want a large chunk of text displayed while maintaining the shape of your site.

So, for example, if you have that update page mentioned earlier, first go to the div in your CSS page that will hold your text (or other update content) . Let’s say you defined it as a class named “current.” You would type the following:

#current {



Then, in your html page, you can paste however much text into that div and not have to modify the exact dimensions of your CSS page, depending on how much text you put in. Instead, you’ll get a handy, user-friendly scrollbar.

-Jon Kimmel

~ by blackburnkimmel on February 18, 2010.

%d bloggers like this: