You’ve probably heard “iframes are horrible with search engines.” Well, they are.
I recently had a client want me to create scroll boxes for their website so they could fit 1000+ words into a 300×457 pixel scroll box. How can I create this scroll box without the iframe? Well, you are about to find out.
CSS Scroll Box Instead of an iframe:
We’re going to use a css property called “overflow,” and by setting it to auto, it turns a normal div into a scroll box!
#scrollbox {
width:300px;
height:457px;
overflow:auto;
}
<div id=”scrollbox”> *enter endless amounts of words*</div>
So what just happened there is we assigned a div with a fixed width and a fixed height. Normally, if you had an element (ie image or text) that was too big for those dimensions, the element will be pushed larger. By adding the CSS scrollbox property of “overflow:auto” we tell the div to create a scrollbar instead of changing the size of the div.
The CSS property “overflow” does have a possible value of “scroll”, but this adds a permanent scrollbar to the bottom and right-hand side of the div even if you don’t need them. This “auto” value is great because if your content isn’t larger than the div, no scrollbars will appear. And if your content only stretches horizontally, you will only see a horizontal scrollbar!
That’s it!
Ashton Sanders
8 Comments
Great piece of code! This really makes things easy.
JThompson
Thanks JThompson. Glad you could use it. I had been trying to bypass the frames but still have a scroll box in my websites for at least a couple months when I finally sat down and looked for it.
Thanks for the comment,
Ashton Sanders
any way to have an html appear within the div tag?
Good question.
Yes, you can put HTML inside the “div” tag, following normal HTML rules. This means you can’t put a “html” or “body” tag inside the div.
Enjoy,
Ashton Sanders
I used this code and it works great in IE but it doesn’t work in firefox 🙁 is there any code like this that DOES work in firefox that someone knows about?
Hi iiSwan,
Actually, it works fine in Firefox. What is not working for you?
Ashton
Ashton, I do apologize. I made a mistake and that was the reason it wasn’t working. I definetly see using this code in the future. Thank you for posting.
Not a problem. I’m glad you got it working! You’re very welcome.