Supported by :   My Law Forms Ltd. - Deed polls and Tenancy Agreements

CSS Tip – Scrollable DIVs; using overflow, overflow-x and overflow-y

scrollable divs exampleAn alternative to FRAMES and IFRAMES within a XHTML document where page layout is fixed, but content needs to be within a scrollable area, is to use a DIV and set the CSS attribute ‘overflow’. This is relatively straight forward to do and works in all modern browsers. In the event that CSS is disabled or the content is read by a search engine spider, the DIV behaves like any other block level element. This avoids the problem associated with FRAMES and IFRAMES where a search engine does not relate the frame content to the parent page.


There are three variations to the 'overflow‘ attribute and four possible values;

The variations are:

  • overflow: Set property for both vertical and horizontal scrolling. Widely supported.
  • overflow-x: and overflow-y: Set property for each axis; vertical and horizontal. Variable browser support.

Acceptable property values are:

  • Visible: text will render outside the element beyond DIV dimensions;
  • Hidden: Contents will be clipped, unable to be seen outside DIV dimensions
  • Scroll: Contents will be clipped, with a scroll-bar to see the rest of the content
  • Auto: No scroll bar, unless content is larger than DIV dimensions.

NB: Some browsers do not support the overflow-x and overflow-y properties, which can lead to unexpected layout problems when you only want the DIV to scroll on one axis. To ensure maximum compatibility use both overflow and overflow-x and/or overflow-y. The following example displays a DIV which by default has auto scrolling, but for browsers that support overflow-x, only scrolls horizontally:

overflow: auto;
overflow-x: scroll !important;

Code fragment:

<div style="overflow: auto; width: 600px; height: 50px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pretium est ac mi. Sed eget sem vitae justo viverra nonummy. Sed adipiscing. Nullam pretium adipiscing ligula. Aliquam vitae dui. Nam enim arcu, hendrerit et, iaculis lobortis, posuere euismod, lacus. Praesent scelerisque lectus a urna. Morbi interdum. Aliquam adipiscing. Aliquam in mi. Pellentesque ac lectus id purus hendrerit
euismod.</div>

An example can be seen in action here…

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pretium est ac mi. Sed eget sem vitae justo viverra nonummy. Sed adipiscing. Nullam pretium adipiscing ligula. Aliquam vitae dui. Nam enim arcu, hendrerit et, iaculis lobortis, posuere euismod, lacus. Praesent scelerisque lectus a urna. Morbi interdum. Aliquam adipiscing. Aliquam in mi. Pellentesque ac lectus id purus hendrerit euismod.

This entry was posted on Monday, October 1st, 2007 at 1:53 pm and is filed under CSS Tips, XHTML tips. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.