Pin Me

How to Use the CSS Overflow Property and Write Scroll Box HTML Code

written by: Sam OBrien•edited by: Simon Hill•updated: 3/18/2010

Learn how to write scroll box HTML code for your web forms and how to use the Cascading Style Sheet (CSS) overflow property to add scroll boxes to your web pages.

  • slide 1 of 5

    Scroll Box HTML Code for Web Pages With Interactive Forms

    Many web sites allow visitors to send email to the web master or to various people responsible for handling and/or routing messages to different departments in a business or organization. Almost all web developers make use of a contact form instead of exposing the email addresses in email format which will surely invite spam. Even when the main contact email address is given in case the form doesn't work for any reason, it's usually written in a way that malicious bots shouldn't be able to read such as: main/at/somedomain/dot/com. Forms used for visitors to send email or feedback usually contain a message or suggestion area where you can type in your compliments, complaints, questions, or suggestions. Typically, you will see a scroll bar appear if your message "outgrows" the typing area. This is achieved with simple scroll box HTML code. The Cascading Style Sheet (CSS) overflow property isn't needed in this situation.

    The following code creates a text box. Remember that columns (cols) determine width and rows determine length. The higher the numbers assigned to these attributes, the larger the box will appear and the more text that will be needed before scroll bars appear automatically. The scroll box HTML code here shows the necessary form tags, name of the form, action (the script that will be handling it), and the method. The code following the post method is for the purpose of using javascript to validate the form. You can disregard this, especially if you'll be using a server-side script for form validation. I included everything because this is a snippet of code that I wrote for actual use. If you click on the screen shot, you'll see how the code is rendered in a web browser. Although it's pretty traditional to use lorem ipsum text as sample text, I choose to avoid it. However, I typed in enough lines to cause the automatic appearance of scroll bars.

    <form name="contact_form" action="contact.php" method="post" onsubmit="return validate_form ();">


    <textarea name="message" cols="30" rows="10"></textarea>


  • slide 2 of 5
  • slide 3 of 5

    Working With the CSS Overflow Property

    The time could come when you'd like to have a section of a web page scroll while the rest of the information remains static and independent. The outdated use of frames is no longer necessary to achieve this. In the screen shot of the code below you can see that I created a CSS class style named "box1" to go on the div tag for the block of content that is to scroll independently of the rest of the page. The class sets a height and width for the area, which when exceeded by content, will cause the automatic appearance of horizontal and vertical scroll bars. Note that the CSS overflow property is not the same thing as the scroll box HTML code. The class also calls for a gray background and for the block to be floated. This isn't necessary for scrolling. You can also see what this code produces once rendered in a browser.

  • slide 4 of 5
  • slide 5 of 5

    More Values for the CSS Overflow Property and Final Notes

    If only large amounts of text are added, you'll only see the vertical scroll bars in operation. If you add something like an image with a width greater than the width set in the box1 class, the horizontal scroll bars will be activated. While the CSS overflow property can be assigned values other than "auto," this is usually the best choice. Some of the other values are: visible, scroll, and hidden. The "scroll" value calls for the appearance of scroll bars even if they're not needed to view all content in the section. The "visible" value can be inconsistent in Firefox and Internet Explorer, and the "hidden" value won't permit the viewing of content that exceeds the container.

    The CSS overflow property is a specification in CSS2. Although this language is justifiably criticized by some web developers, unless you resort to creating sites completely in Flash, you don't have much choice if you want to do front-end development. If you are a student studying web design and development, keep in mind that, depending on your school's program, there are quite a few CSS properties which you might not be introduced to until you begin work in the real world. One of them could very well be the CSS overflow property and the vertical-align property. You might also be interested in learning how to use the span tag and display parameters to provide enhanced web menus.