CODEWITHSUNDEEP
csshtmlscrollbar
ggcodes
ggcodes

Reputation: 2899

horizontal scrollbar

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?

Upvotes: 6

Views: 76187

Answers (5)

Rahul Mehra
Rahul Mehra

Reputation: 720

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>

Upvotes: 1

SyntaxError
SyntaxError

Reputation: 1752

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>

Upvotes: 11

clyfish
clyfish

Reputation: 10450

overflow: auto;
white-space: nowrap;

http://jsfiddle.net/GCPDE/

Upvotes: 3

sooper
sooper

Reputation: 6039

Change your style to this:

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

Just a case of incorrect syntax.

Upvotes: 1

onimojo
onimojo

Reputation: 578

Insert in the div style :

overflow-x:scroll;

Upvotes: 11

Related Questions