Clipping and Overflow

Controlling Overflow Content

Here's an example:

<div class="container">
    <div class="somethingbig"></div>
</div>

div.container {
    width: 75%;
}
div.somethingbig {
    width: 120%;
}

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 you'll want to shrink an image to fit in it's container, rather than clip it off or make users scroll to see it all. A good setting I often use on images is max-width: 100%;

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 auto

In this example, I don't care if the text in div.somethingbig wraps to a new line and makes the container taller. I only want to change how its width is displayed, so I'll use overflow-x.

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 if the container and inner content have no 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;
}

Auto

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

div.container {
    overflow-x: auto;
}

Scroll

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

div.container {
    overflow-x: scroll;
}

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 is creating an undesirable effect in your layout as the window size changes.

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 or touchpad. 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.