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

With overflow set to hidden, the excess content in the div on the right is cut off at the bottom. It keeps the page structure intact, but the user can no longer see all of the content. So you must use this setting with care when you design your webpages.

This page was last modified on December 09, 2015

Copyright © 2005-2018 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. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.

Looking for more website design information? See my Sitemap!

  Share This Page!  
Still Have Questions? 
Talk To Me! Click Here!