6

How can I make an automatic horizontal scroll bar in my page if the content will overflow in its border.

<html>
     <body>
        <div style ="width: 20px; height:30px; border:1px solid black; overflow:auto">
            <!-- various of text here that can makes it go out the border-->
        </div>  
     </body>
</html>

What if the text in my content is too long, how can I make an automatic horizontal scrollbar?

5 Answers 5

11

change your code into this:

 <html>
 <body>
    <div style ="width: 20px; height:30px; border:1px solid black; overflow-x:scroll">
        <!-- various of text here that can makes it go out the border-->
    </div>  
 </body>
 </html>
11

Insert in the div style :

overflow-x:scroll;
2
  • w3schools notes that this doesn't work properly on IE 8.0 and earlier. Dec 18, 2012 at 2:12
  • 1
    @bonsaiviking offtopic: please read this before referencing that site again
    – Shomz
    Dec 18, 2012 at 2:16
3
overflow: auto;
white-space: nowrap;

http://jsfiddle.net/GCPDE/

1

Change your style to this:

style="width: 20px; height:30px; border:1px solid black; overflow:auto;"

Just a case of incorrect syntax.

3
  • Oh well, looks like the edited version of your original post is now correct.
    – sooper
    Dec 18, 2012 at 2:11
  • Oh, I edited the question - I thought it was a typo and not the exact code.
    – Shomz
    Dec 18, 2012 at 2:12
  • Agreed, I think I'll leave it since clyfish has already added it above.
    – sooper
    Dec 18, 2012 at 2:16
1

NOTE: In order to make text horizontally scrollable you will have to add overflow-x:scroll; overflow-y: hidden; white-space: nowrap; to your div.

<html>
     <body>
        <div style ="width:20px; height:30px; border:1px solid black; overflow-x:scroll; overflow-y:hidden; white-space:nowrap;">
            <!-- various of text here that can makes it go out the border-->
        </div>  
     </body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.