CSS Overflow Property Explained

Author: Stefan Vervoort | Published: 12 December 2007 | RSS | LINK Font size:

The CSS property Overflow can be used when displaying content. It regulates the scrollbars. This property 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:auto;
}

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!

Liked this post? Subscribe, or Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Blogosphere News
« Code Snips I | I wish you a merry Christmas! »

24 Comments

  1. Stelian Andrei
    2:01 am on December 15th, 2007

    Hello. Nice explanation for overflow. Very clean and very easy to follow. I like it. Regarding that tip you’ve let at the end. I usually don’t specify a height for DIVs if I want them to spread according to their content. I believe it’s the default behavior. I place a height only when I want them to be fixed size, but I might be wrong here.
    On topic: one very handy use for overflow is to hide the default IE scrollbars that appear even if the page is empty. Setting an overflow:auto on the body tag would fix that. Or was it on the html tag? I can’t remember exactly, but it was one of them

  2. Stefan Vervoort
    4:40 am on December 16th, 2007

    Hello. I usually don’t specify a height either, but for testing (without much content), sometimes it’s handy to give your div some height to make it look good without content either. Some other problem pops up when you don’t add height? What if the div is needed to have a height of 400px minimal? Without much content, to make the design look good. Whenever more content is added, the div should extend. That’s a tricky part.

    The tip on hiding IE scrollbars, is a great one! Thank you, I’ll add it to the article!

  3. Vinay
    6:29 pm on December 18th, 2007

    How can i subscribe to your blog feeds stefan?

  4. Stefan Vervoort
    3:23 pm on December 19th, 2007

    Oh, the link on the right has been deleted for some reason. You can view my feed here; http://feeds.feedburner.com/StefanVervoortsBlog

  5. Chris Olberding
    2:49 am on December 22nd, 2007

    nice article. i like the idea of posts of the ‘this is a slightly confusing feature let’s go through it and put all questions to rest’ nature.

  6. Peter
    5:40 pm on December 28th, 2007

    stefan, I would like to add that (1) on the iPhone there is no such thing as a scrollbar :P and so if you set the overflow as either ‘auto’ or ’scroll’, it is treated as if it is hidden and more importantly (2) there are the following properties in CSS that you can use to define the dimensions of an element, although it is not well supported by IE: max-height, min-height, max-width, and min-width. I do not know if you were aware of them but I figured that I would add that to the mix. It is a good article/read, thank you.

  7. Stefan Vervoort
    7:23 am on December 30th, 2007

    Peter; Where do you see me talking about a scrollbar? :P I was not aware of those properties, but why use them when IE doesn’t not support this elements well? There are still too much people using IE to use the properties. You should always keep IE in mind when designing a website.

  8. Eyup
    5:26 pm on January 1st, 2008

    Nice article and easy to understand.
    Thank you.

  9. bushan
    8:41 am on January 2nd, 2008

    hey
    …..:thanks a lot:…..
    How can i subscribe to your blog feeds stefan?

  10. Stefan Vervoort
    9:02 am on January 2nd, 2008

    Thanks; here is the link. http://feeds.feedburner.com/StefanVervoortsBlog

  11. music
    11:51 pm on January 6th, 2008

    very interesting.
    i’m adding in RSS Reader

  12. miguel
    1:19 pm on February 11th, 2008

    hey in the first scroll, the variable for “scroll” says “hidden” but its actually auto :) little typo there

  13. Stefan Vervoort
    4:28 pm on February 11th, 2008

    @Miguel; Thank you for pointing this out. :)

  14. John Bokkelen
    1:28 am on February 14th, 2008

    What should be a remedy if Iphone doesn’t support scroll-bar.

  15. dj
    3:22 am on May 15th, 2008

    dudez how can i move this div like ” left and right “

  16. JP
    5:32 pm on May 22nd, 2008

    Dude, I have always wondered how to do the last part. Doing a big website update, and thought i would finaly look into using overflow.

    And 30 secs, found your site. and “done”. works perfectly. thx

  17. Stefan Vervoort
    7:13 pm on May 22nd, 2008

    JP - Thanks. Great you have finally found the tip you needed. In the past, I had problems with that all the time!

  18. farouk
    11:13 am on June 1st, 2008

    Ohh what a relief. been buttling with this overflow because both mozilla and firefox were showing only the header of the page.I was seriously fixing server-side code
    Had a look at the page source and everything was there. given that am not very experienced in css, it even didnt occcur to me the whole page was been clipped.

    anyway, thanx for teaching us to pay attention to the simple solutions.

  19. farouk
    11:26 am on June 1st, 2008

    Ohh No. mozilla was happy about my new found knowledge but IE(of course) is still clipping the div and also inserting a vertical scroll bar even after clipping the div

    my styles
    #content {
    margin: 0 0 0 0px;
    width: auto;
    overflow: visible;
    height:auto;
    }

    body{
    padding: 0px;
    margin: 0px;
    overflow:auto;
    }

  20. June
    12:28 pm on June 1st, 2008

    nice script :)

  21. Stefan Vervoort
    9:13 pm on June 1st, 2008

    @Farouk - Damn Internet Explorer as always..

  22. ging
    1:10 pm on June 10th, 2008

    thanks for this tip! it relieved me of an impending OCD attack, hee!

  23. Debra
    7:30 pm on July 19th, 2008

    I rather new to this … how do I specify what area I want the scrolling text to be in; i.e. a cell of a table, etc.

  24. Stefan Vervoort
    9:06 am on July 26th, 2008

    @Debra - You should add a class or id to that cell. and after that you should create a td.scroll class. You can style that class the way you want, so you can add the overflow property as well.

Leave a Reply

This blog is a DoFollow blog. This means your URL counts as a backlink. Some basic HTML is allowed. Please keep all comments constructive, polite and on-topic. Any spam or offensive comments will be deleted.