HTML: How to create a DIV with only vertical scroll-bar to show long paragraphs on a webpage?

Question

I want to show terms and condition note on my website. I dont want to use text field and also dont want to use my whole page. I just want to display my text in selected area and want to use only vertical scroll-bar to go down and read all text.

Currently I am using this code:

<div style="width:10;height:10;overflow:scroll" >
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
</div>

Two Problems:

1. It is not fixing the width and height and spread until the all text appears. 2. Second it is showing horizontal scroll-bar and I don't want to show it.

Any Idea ?

Thanks

Answer 1

You need to specify the width and height in px:

width: 10px; height: 10px;

In addition, you can use overflow: auto; to prevent the horizontal scrollbar from showing.

Therefore, you may want to try the following:

<div style="width:100px; height:100px; overflow: auto;" >
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
</div>

Renders as follows in Firefox:

Answer 2

See overflow-y. It's CSS 3.