A very handy technique in website design with CSS is the use of the property "overflow" to limit the impact of things like dynamic content and varying browser window sizes in displacing other elements on your web pages. The overflow property allows you to control how a browser handles situations where the space required to display the content of a containing element exceeds the space available within that containing element. You have four basic choices for the overflow property: (1) visible, which allows the excess content to be displayed without regard to the size of the containing element, (2) hidden, which "clips" the excess content and makes it invisible, (3) scroll, which adds scroll bars to the containing element, allowing the user to scroll through the excess content as he pleases, and finally, (4) auto, which allows the browser to provide scroll bars if needed. Being a long-winded writer, I often use the setting "scroll" to embed content in my documents that may only be of interest to a limited percentage of users without disturbing the main content. Using a setting of "auto" is often a good choice when either you can't be sure of the size of the content that will be displayed, or if cross-browser compatibility issues make the situation uncertain.
The box on the right is an overflow-controlled <DIV> that uses "overflow:scroll" to allow the blantant advertising content to be confined to a limited area within the document. Note that the content includes an image and other styling controls. The scrolling content is not limited to simply text.
In this case, I used "float:right" to make the inserted content stand flush to the right side of this section of the page. I could have used absolute positioning just as well. You do need to be aware of the need to set the padding of the overflow-controlled <DIV> so that the content doesn't flow flush against the scrollbars.
With overflow set to visible, which is the default, the excess content in the <div> on the right breaks out of this containing <div>. The display can certainly be ugly, but the entire content is always visible to the user, which is usually a good thing.
CSS Tutorial Main Page •
Tools and Scripts Menu
Copyright © 2005-2011 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission.
