Wednesday, July 11, 2007

Overflow

The overflow property is a neat feature of CSS2 I just started playing with. The default for overflow is "visible", meaning any content inside a div that goes outside the div boundaries is shown. For example, if the text runs long in a div, the text will still be shown in the browser. By setting overflow to "hidden" you can use the parent div tag to mask the contents, so text that runs long is clipped. This approach might feel more natural to a designer coming from the page layout world of Quark and InDesign.

The feature becomes more interesting when you are using more than text in the div. If you have other content, it will act like a mask clipping the content, which is not something you could do with a page layout program's text box. Take a look at the W3 site example here.