CSS Overflow Property Explained
Author: Stefan Vervoort | Please Comment!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!
Loading ...
Loading...
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
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!
6:29 pm on December 18th, 2007
How can i subscribe to your blog feeds stefan?
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
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.
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
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:23 am on December 30th, 2007
Peter; Where do you see me talking about a scrollbar?
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.
5:26 pm on January 1st, 2008
Nice article and easy to understand.
Thank you.
8:41 am on January 2nd, 2008
hey
…..:thanks a lot:…..
How can i subscribe to your blog feeds stefan?
9:02 am on January 2nd, 2008
Thanks; here is the link. http://feeds.feedburner.com/StefanVervoortsBlog
11:51 pm on January 6th, 2008
very interesting.
i’m adding in RSS Reader
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
4:28 pm on February 11th, 2008
@Miguel; Thank you for pointing this out.
1:28 am on February 14th, 2008
What should be a remedy if Iphone doesn’t support scroll-bar.
3:22 am on May 15th, 2008
dudez how can i move this div like ” left and right “
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
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!
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.
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;
}
12:28 pm on June 1st, 2008
nice script
9:13 pm on June 1st, 2008
@Farouk - Damn Internet Explorer as always..
1:10 pm on June 10th, 2008
thanks for this tip! it relieved me of an impending OCD attack, hee!
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.
9:06 am on July 26th, 2008
@Debra - You should add a class or id to that cell.
3:51 pm on September 9th, 2008
Hi Stefan, you’re description of overflows is really helpful, but I am encountering just one problem in Mozilla Firefox which I can’t resolve:
I’m using your CSS above with -overflow: auto-. My problem is that the specific text I’m using contains no spaces. What happens is that instead of the overflow working as expected, now only get one line of text truncated at the end of line.
Do you have a explanation for this and a way to prevent it from happening? Thanks.
4:58 pm on September 9th, 2008
Thanks Chris for your question.
The problem you are facing is natural: your browser thinks the text without spaces is one word, and in order to fit that in your div, it automatically overflows your ‘width’.
Of course, there is a way to prevent this. You should 1) add spaces to your text, or 2) find a PHP script that breaks the lines for you automatically. Then you don’t have to make the choice of where to break your text yourself: the script will do that for you.
Anyway, I think the most simple solution is to add spaces.
8:02 pm on November 18th, 2008
I have tried this to create a horizontal scroll only and it worked on my mac in Safari and Firefox but I am still getting a vertical scroll on a PC laptop. Any answers?