Clipping and Overflow
Sometimes 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%;
}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 an img reset in CSS to fit images into their containers, rather than clip them off or make users scroll to see everything. max-width: 100%; takes 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;
}Auto
With auto, the browser will show a scrollbar only if the content is getting clipped.
div.container {
overflow-x: auto;
}Scroll
With scroll, the browser will always show 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 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
- 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.
- 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.
- Navigation. Users may not always be using a mouse, touchpad, or touchscreen. Keyboard navigation of overflow content nested on a page is more difficult.
- 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.