Overflow Control With CSS
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.
overflow:visible Example
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 a good thing, and it can be the best choice if you're using a flexible design layout that allows the dimensions of key elements to expand or contract in relation to the size of the browser window. But you obviously need to balance usability with style, so you always want to make deliberate choices in your overflow settings.
overflow:scroll Example
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. Scrollable content gives you the best of both worlds: the layout is flexible and users have complete access to all of the content.
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.
overflow:hidden Example
This page was last modified on October 01, 2020
