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 overflow are really easy, 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.

Controlling Overflow Content

Here's an example:

<div class="container">
  <div class="somethingbig"></div>
</div>
This may be an image, a sprite (as we'll talk about soon), 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 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 for 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.

All the overflow properties have the following options (visible is the default): visible | hidden | scroll | auto

In this case, 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.

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 (as we'll talk about soon), or a long bunch of content (either vertical or horizontal).

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.

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

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

This is good for usability if your layout is flexible. Scroll bars appear and disappear on the browser window as needed. However, for scrollable areas within your page, it can potentially be confusing if they come and go.

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

Creating Overflow Content

So how do we force content to stick out of its container?

  1. To prevent the container from expanding to fit everything, you may need to set the height or width on it in CSS.
  2. For horizontal areas, set the contents to some form of inline display, and prevent word wrapping.

Normally the browser will wrap inline content (e.g. text) where there's white space in the code. You can tell the browser not to do this using the white-space property in CSS.

There's more info on all the white-space options in the footer, but the most important one here is nowrap:

div.container {
  overflow-x: scroll;
  white-space: nowrap;
}

/* pink boxes */
div.nonwrappingblock {
  display: inline-block;
}

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? The cue can certainly be subtle, just make sure your design implies there's more going on than usual.
  3. Navigation. Users may not always be using a mouse or touchpad. Keyboard navigation of overflow content nested on a page is very 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 for scrolling 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.