How to use Overflow

It’s been a while since I wrote a tutorial, but in my spare hour, I’ll write one about an element in CSS. The element is a tricky one, which I had got some problems with in the past. Do you want to expand your DIV’s? Or when they get to a specific height, let some scrollbars appear? Read this tutorial and learn!
What’s Overflow?

You can use 4 variables in the element overflow, namely auto, hidden, scroll and visible. Auto will automatically add a scrollbar when needed. Hidden will not show a scrollbar, but ‘hide’ the content that usually expand the box. Scroll will always add a scrollbar. The value visible will not expand the div, but will just display all the content without changing the div’s height.

We’ll test every variable in a example.html file I prepared for this tutorial. The HTML used in this example:

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam egestas, risus id aliquet dapibus, eros tellus vulputate nunc, ut vehicula magna augue vel quam. Phasellus enim massa, consequat in, posuere nec, commodo at, mauris. Nam congue dolor eu mi. Pellentesque libero lacus, condimentum vel, vestibulum et, <strong>tristique vel, nisl. Vestibulum malesuada.</strong> Suspendisse consequat consequat tortor. Pellentesque ultricies urna nec augue. Suspendisse eget sapien nec nunc fringilla tempor. Fusce consequat risus tempor nibh. Quisque venenatis nisi sed ipsum.
</div>

I’ll give you the CSS codes later on, because they are a little different every time.

Example: Auto

You should use this value when you want to let the browser decide what’s right. Scroll down? Scroll right? No scrolling at all? The browser makes this decision. This value usually is the best choice.

CSS

div {
background:#ccc;
height:100px;
width:100px;
overflow:visible;
}

For an example, please click this link. Example: Auto.

Example: Hidden

This value will not add any scrollbars or will not display more text then needed. When the content crosses the ‘height’ given to the container, it simply don’t display that content. Handy when you post large images, which shouldn’t screw your layout. Simply give their overflow this value, and they won’t be rendered where the content area stops!

CSS

div {
background:#ccc;
height:100px;
width:100px;
overflow:hidden;
}

For an example, please click this link. Example: Hidden.

Example: Visible

Visible is the standard value. No scrollbars will be added, and your content will just flow. The div the content is placed inside won’t expand when more content is added.

CSS

div {
background:#ccc;
height:100px;
width:100px;
overflow:visible;
}

For an example, please click this link. Example: Visible.

Example: Scroll

When more content is added, the container won’t stretch, there are scrollbars to navigate the content that isn’t visible. Make sure there is always enough content in this box, because otherwise there are ugly scrollbars for nothing!

CSS

div {
background:#ccc;
height:100px;
width:100px;
overflow:scroll;
}

For an example, please click this link. Example: Scroll.

A small tip from me!

I always had problems with my content. I never touched ‘overflow’, but when I finally got to it, it didn’t work out for me as well. My content never expanded the way I wanted it to, it always stuck on the height defined in the same ‘container’. When you don’t want to add scrollbars, but just want to expand your box as long as your text is, change you height property like this.

div {
height:100px;
overflow:visible;
}

To this:

div {
height:auto;
overflow:visible;
}

This very small thing, took me hours of investigation to find out. Your box will now expand all the way down your content. Don’t laugh at me, this is that very irritating part of coding, where you can’t seem to find the fault!

Edit: I’ve received a smart tip. Internet Explorer, always displays scrollbars, even when the page doesn’t need them. To hide the scrollbars on a small page, the use of overflow is needed as well. Add the following line to your body selector in CSS.

body {
overflow:auto;
}

Thanks for reading!