Pin Me

How to use the CSS Overflow Attribute

written by: Profacgillies•edited by: Simon Hill•updated: 2/15/2010

The overflow attribute in CSS can be used in a number of different ways to add effects to your web pages and fit more content onto one page to increase the chance of your visitors reaching it. This article describes the CSS overflow attribute and includes some examples.

  • slide 1 of 2

    The CSS Overflow Attribute

    If a CSS element has a fixed width and height, then the overflow attribute controls what happens when the content inside the box exceeds the dimensions of the CSS element.

    If the following element:

    <div style="width:200px;height:200px"></div>

    contains the following image:

    <img src="bigger.jpg" width="400px" height="300px" alt="this image is bigger than the element that contains it" />

    then the entire image is displayed by default. The default state is equivalent to using the CSS overflow attribute with its default visible attribute:

    <div style="width:200px;height:200px;overflow:visible;">

    On the other hand, if the CSS overflow attribute is set to hidden, then the image is curtailed to the dimensions of the <div> element.

    <div style="width:200px;height:200px;overflow:hidden;">

    If the CSS overflow attribute is set to scroll, then the image is curtailed to the dimensions of the <div> element, but a scroll-bar is added to allow scrolling to reveal the rest of the content. The scroll bar will appear whether the content is too large or not.

    <div style="width:200px;height:200px;overflow:scroll;">

    One of the most useful values for the CSS overflow attribute is auto. In this case, the image is curtailed to the dimensions of the <div> element, but a scroll-bar is added to allow scrolling to reveal the rest of the content, but only in those cases where the content exceeds the dimensions. Further, it will appear only for one dimension if only one dimension exceeds the dimension of the containing element.

    <div style="width:200px;height:200px;overflow:auto;">

    Finally, the value can be set to inherit, but this value is not supported by any version of Internet Explorer, so will not be considered further here.

  • slide 2 of 2

    Applications of the CSS Overflow Attribute

    The Scrolling Gallery

    In a recent article I showed how you could use the CSS overflow attribute to construct a scrolling gallery wall to display pictures. For more details, or to see it in action, visit for an example of a working application of this type.

    Replacing the Read more message on your blog

    Many content management systems or blogging sites lead to a series of items with a Read more link at the bottom of the item. The reader has to click on the link and is taken to a new page to read the full article. An alternative strategy is to set the CSS for the item to overflow auto, this allows the content to be accessed by scrolling down, and crucially does not take the reader away from the main page, which may encourage the reader to stay on your site and access more content.

    Accommodating dynamic content

    One of the ways of getting dynamic content to an otherwise static site is to use a script to turn RSS syndicated content into html. See for an example script or search RSS 2 html in your favourite search engine to find others. One of the challenges is that the length of an article retrieved by such a script can be highly variable. In order to accommodate the generated text within a fixed HTML layout, use of the overflow:auto attribute is almost essential.