Search This Blog

Monday, November 14, 2016

Creating Scrollable Box In A Webpage Using CSS

Scrollable box refers to a box where it's content is more than the size of the box, but instead to box content to expand the box size, box nest all the content is its specific size but create an additional scroll you can you can view other of it content which are not readily visible.

To add or create a scrollable box to a webpage you are developing we recommend you to use the following steps.

  1. First create the content of the box.
    This will enable you not to have difficulty editing is when you are using the design view and not the code view of your web design program.
  2. When you are done creating the content, now which to the code view (if it is not currently on code view) and enclose the content with the <div> tag.
    That is, add the opening <div> tag at the beginning of the content, and the closing </div> tag at the end of the content.
  3. Next use this CSS code on the opening <div> tag, so as to make the box which was created by the <div> tag have a fixed size and scrollable: 
    1. height: 500px; (this code specifies that any of the div content that is not within the 500px size of the div element should not be displayed.)
    2. width: 500px; (this code specifies that any of the div horizontal content that is not within the 500px size should not be displayed.)
    3. overflow: scroll: (this code specifies that the div tag should be scrollable so that users can scroll to see the div content that is not withing the 500px size of the div element)
  4. So the whole code should be looking similar to this <div style="height: 500px; width: 500px; overflow: scroll;" > content </div>
That is how to create a scrollable box in a webpage using CSS.
Very simple right?...

Team Pinfoltd



Search This Blog