Loading ...
CSS Overflow Property Explained
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:
1
<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
1 2 3 4 5 6 7 8 9 10 11
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
1 2 3 4 5 6 7 8 9 10 11
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
1 2 3 4 5 6 7 8 9 10 11
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
1 2 3 4 5 6 7 8 9 10 11
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.
1 2 3 4 5 6 7
div {
height:100px;
overflow:visible;
}To this:
1 2 3 4 5 6 7
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!
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
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!
How can i subscribe to your blog feeds stefan?
Oh, the link on the right has been deleted for some reason. You can view my feed here; http://feeds.feedburner.com/StefanVervoortsBlog
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.
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.
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.
Nice article and easy to understand.
Thank you.
hey
…..:thanks a lot:…..
How can i subscribe to your blog feeds stefan?
Thanks; here is the link. http://feeds.feedburner.com/StefanVervoortsBlog
very interesting.
i’m adding in RSS Reader
hey in the first scroll, the variable for “scroll” says “hidden” but its actually auto
little typo there
@Miguel; Thank you for pointing this out.
What should be a remedy if Iphone doesn’t support scroll-bar.
dudez how can i move this div like ” left and right “
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
JP – Thanks. Great you have finally found the tip you needed. In the past, I had problems with that all the time!
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.
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;
}
nice script
@Farouk – Damn Internet Explorer as always..
thanks for this tip! it relieved me of an impending OCD attack, hee!
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.
@Debra – You should add a class or id to that cell.
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.
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.
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?
Overflows can come in very handy, especially for Internet Explorer bugs. Thanks for the info.
Hello guys!
I would really appreciate if anyone could help me please on this most intriguing issue:
I have a html table with width=100% and with 3 columns: name, description, date.
I want the column widths to be relative to the browser’s window size (so the user can resize the table when resizing the window) like this 30%, 50%, 20%.
But I also want that the text inside each cell to be written on only one line (white-space: nowrap),
and be clipped by the browser if it’s longer than one line (i.e wider than the cell’s width) (overflow: hidden).
Unfortunately, the clipping does not seem to work with % width, but only with specific pixel widths.
Did anyone had the same problem before? Do you know of a solution? Can it be done in CSS? Or it can only be done with javascript (onresize set the new width for the cell)?
Thank you in advance.
I just figured out the solution myself, so I present it here in case someone else has the same requirements:
Put a div inside the table cell, with the following CSS style:
height: 25px;
line-height: 25px;
white-space: normal;
overflow: hidden;
So now the cell content will be clipped to only one row of text.
I just wondered with these Div tags.
Can you insert images in them?
Cheers,
Mark
I am not very sure. I think it is possible, perhaps you can test it?
Good explanation. I may be a big poof but I know how to hide the sausage.
Skweekah Dha Poof
Very nice and simple explanation. I am the coder that always has problems with css
.
[...] View Tutorial [...]
[...] Source [...]
[...] http://divitodesign.com/css/css-how-to-use-overflow/ [...]
Thank you! Just what I was looking for!
div {
height:100px;
overflow:visible;
}
I meant this
div {
height:auto;
overflow:visible;
}
i am a novice in SEO but i assume that the submission of articles in write-up directories is one of the ideal approaches to acquire backlinks to your site.
Thanks for this interesting article. I’ve book marked this page because I hope you post more articles soon, I will definataly share this.