Clipping and Overflow

Often times you'll have content that's too big for your layout, or needs to be partially masked.

The CSS properties for controlling what happens when content overflows are pretty easy to work with, and all you need is a container to serve as your "clipping mask". In many cases, your layout will already have something serving as a container, so you might not even need extra markup.

Most of the time we don't need or want to have overflowing content like this in our designs. In situations where you do want to purposely make the contents of an element overflow, you'll sometimes need to set an explicit width or height on the container using CSS.

Controlling Overflow Content

Here's an example:

<div class="container">
    <div class="somethingbig"></div>
</div>
.container {
    width: 75%;
}
.somethingbig {
    width: 120%;
}
This may be an image, a sprite, or a long bunch of content (either vertical or horizontal).

div.somethingbig is wider than its container, so it sticks out and breaks the flow of our page.

This happens a lot with images, but usually we use the img reset in CSS to fit images into their containers, rather than clip them off or make users scroll to see everything. display: block and max-width: 100%; take care of that.

There are 3 main CSS properties to control how overflowing content gets displayed: overflow-x, overflow-y, and the shorthand overflow. The shorthand lets you specify both x and y at the same time.

Overflow properties have the following options: visible (the default), hidden, scroll, and auto.

Visible

Visible is the default. As you can see above, the inner content will happily stick out of its container. This may not be immediately obvious, especially if the container and inner content don't have borders or backgrounds to clearly show their size.

Hidden

The hidden setting will hide the overflowing content. Keep in mind that it can still be selected even if you can't see it.

div.container {
    overflow-x: hidden;
}
This may be an image, a sprite, or a long bunch of content (either vertical or horizontal).

Auto

With auto, the browser will generate a scrollbar if the content is getting clipped.

div.container {
    overflow-x: auto;
}
This text will probably stick out of its container, but if it doesn't the browser won't generate a scroll bar.

Scroll

With scroll, the browser will sometimes generate a scrollbar on the container whether its contents fit or not.

div.container {
    overflow-x: scroll;
}
Contents fit, scrollbar anyway.

Usually it's fine to have the scroll bars appear and disappear based on the available space, as they do using auto. The scroll setting can be good if the scroll bars coming and going creates an undesirable effect in your layout as things shift around slightly.

While it's somewhat possible through CSS and javascript to change the appearance of scroll bars, from a usability standpoint this is generally discouraged.

Considerations

  1. Don't Overuse. Try to avoid using special overflow properties too much on your pages. It's very easy to create a level of depth and complexity in your page that's confusing or frustrating to viewers.
  2. Make it Clear. Most people safely assume that all of the content on a page can be seen just by scrolling the main browser window. If additional content is not obviously cut off, how will they know there's more to see? How will they know not to assume your layout isn't simply broken? Be sure your design gives enough of a hint to to the user about how to interact with it.
  3. Navigation. Users may not always be using a mouse, touchpad, or touchscreen. Keyboard navigation of overflow content nested on a page is more difficult.
  4. Mobile. Finally, interaction with touch-based devices necessitates special consideration. Make sure scrolling portions are large enough to touch and drag, but not so large that viewers have nothing to grab to scroll the main window too.

This may not be immediately obvious here, but you'll know right away when you start testing a design on a mobile device.

If this scrollable area is 90-100% wide on a touch device,
and it has lots of really long annoying content in its inner scroll area that I don't want to scroll through, I could end up getting stuck scrolling all the way to the bottom anyway if there's not enough space to touch and grab an area outside of here to scroll the main window. Montes aliquam nisl sollicitudin consectetur quam habitant ac ullamcorper malesuada, molestie suscipit phasellus luctus odio consequat fringilla inceptos himenaeos, amet sapien eu aliquet euismod commodo congue dapibus ridiculus laoreet, enim erat felis primis eleifend suspendisse risus sagittis. Blandit proin eu vel suspendisse tempor velit nostra cursus, sollicitudin nam eget litora scelerisque volutpat facilisi tristique faucibus, congue mollis imperdiet aptent hendrerit enim etiam ligula justo, luctus est fringilla ipsum amet rutrum natoque.