Expression® Web Design

Adding a Scrollbar to a Web Page

Friday, January 16, 2009

In the past, when you saw a scrollbar on a web page, this usually meant the site was using frames.  Fortunately now, almost no one uses frames to build a website.  Relying on styles, you can create a specific area in your web page to contain as much information as needed.  You can see an example of this to the right of this post.  By setting a specific height and width in the divide and adding the overflow property, you can add more to your web page using less space.  I also used the float property in the divide to help place the example to the right of this post, added a small black border to the divide, and changed the font color so you can see the difference between the post and the example.  It can be useful if you have a lot of text that needs to be seen but only a certain amount of space available to you on your web page.

The Overflow Property

The overflow property has four values: hidden, visible, scroll, auto.

Auto Value

Usually, the auto value is the one that most webmasters will pick to use.  This value will add the scrollbar automatically if needed when the web page is rendered in the browser.  This applies to both the horizontal and vertical scrollbar.  If, by chance, the text / contents fit into the contained area, then the user would not see a scrollbar at all.

Overflow Property Source Code (Auto)

Source code is available in a text or zipped format for auto value:

Text (2,052 bytes) | Zipped (1,870 bytes)

Hidden Value

If you use this hidden value, any content that will not fit into the specified dimensions will not be shown (hidden).

Overflow Property Source Code (Hidden)

Source code is available in a text or zipped format for auto value:

Text (4,401 bytes) | Zipped (1,670 bytes)

Scroll Value

If you use the scroll value, this will add scroll bars (vertical and horizontal) to the container, no matter how much content it has.

Overflow Property Source Code (Scroll)

Source code is available in a text or zipped format for auto value:

Text (2,426 bytes) | Zipped (1,810 bytes)

Visible Value

If you choose the visible value, the content will be show even if the container does have enough room.

Overflow Property Source Code (Visible)

Source code is available in a text or zipped format for auto value:

Text (2,061 bytes) | Zipped (1,676 bytes)

And you can also download all the exampled in this zipped file.

Comments

Name
URL
Email	Email address is not published
Access Code
Please enter the access code
Remember Me
Comments