Website Designers and Webmasters

Dedicated to all the tasks Webmasters, Website Developers and Website Designers find themselves facing.

CSS Scroll Box instead of iFrames

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

Tags: , , , , , , ,

8 Comments »

  1. Great piece of code! This really makes things easy.

    JThompson

    Comment by J. Thompson — November 20, 2008 @ 7:43 pm

  2. 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

    Comment by Ashton Sanders — November 20, 2008 @ 7:45 pm

  3. any way to have an html appear within the div tag?

    Comment by Kev — December 1, 2008 @ 11:07 am

  4. 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

    Comment by Ashton Sanders — December 1, 2008 @ 1:07 pm

  5. 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?

    Comment by iiSwanSongii — January 21, 2010 @ 9:24 am

  6. Hi iiSwan,

    Actually, it works fine in Firefox. What is not working for you?

    Ashton

    Comment by Ashton Sanders — January 21, 2010 @ 11:27 am

  7. 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.

    Comment by iiSwanSongii — January 22, 2010 @ 3:03 pm

  8. Not a problem. I’m glad you got it working! You’re very welcome.

    Comment by Ashton Sanders — January 22, 2010 @ 3:12 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment