Scrollable Divs
I’ve been HTML-ing and CSS-ing for years now and had never come across this before: To make the content within a div tag (or any other block tag) scrollable all you need to do is fix the width and/or height and add overflow:scroll; to the style for the tag.
You can also set individual scrollbars with overflow-x:scroll; or overflow-x:hidden; and overflow-y:scroll; or overflow-y:hidden;.
I can’t believe I missed out on this one. Perhaps I need to go back to the CSS specification and work through each attribute one by one.
Wow, that’s really helpful Damian. I was going to be looking for how to do this in the not to distant future just in case I ever want to be able to over segments of code on my blog (for banners etc) without taking up too much space. Being able to use scrolling helps reduce the visual space used.
Glad to have helped and thank you for letting me know. I grab snippets of code from all over the web all the time and seldom stop to thank the person who took the time to write about it. I really must get in the habit – it’s a nice feeling knowing you’ve saved someone some time.
One VERY useful thing I’ve found for scrollable divs is: when you have a table (<table>) with a heading (say, a <htead> tag with <tr>’s and <th>’s in it), then you can make the entire table scrollable. If you then float the thead (using position: relative for the class or style of the heading row), then the table heading remains stationary while the table rows under it scroll. Since this works on the html and css level, it works for any platform (php, .net, etc).
Excellent, I’ll have to use that sometime.