Horizontal scrollable DIV

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • romepatel
    New Member
    • Nov 2009
    • 31
    #1

    Horizontal scrollable DIV

    Hi,
    I am designing my page in PHP,
    I have a div in which is dynamically generating contents.
    But when the contents are more, then alignment is disturbed.
    so need that div should be horizontal scrollable and it should not affect the width of div.

    So i need div should be auto scrollable.
    Thanks in Advance
    Tags: div, horizontal, scrollable
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      Give it a width and set overflow to "auto".

        Comment

        • Frinavale
          Recognized Expert Expert
          • Oct 2006
          • 9749
          #3
          Use CSS to set the div to the desired width.

          Then use CSS to specify that the div should scroll if the content is too wide for the div.

          To set the div to scroll of the content within it is to wide for the div use the overflow style.

          -Frinny

            Comment

            • romepatel
              New Member
              • Nov 2009
              • 31
              #4
              I had that but still am unable to get horizontal scrollbar for DIV tag......
              I it is wroking in IE, but not in Firefox 3.5

              <div style="width:24 5px; padding-left:0px; height:415px; padding-top:5px; position:absolu te; overflow:auto;" >

              ....some content.......

              </div>

                Comment

                • Frinavale
                  Recognized Expert Expert
                  • Oct 2006
                  • 9749
                  #5
                  If your content is just plain text it appears that it is wrapped if you set your overflow:scroll or overflow:auto.

                  Try placing the text in a <span> or <p> or <div> with a display style of block and give it a large width:

                  Code:
                  <html>
<html>
<head>
  <style type="text/css">
    div
    {
      border:thin solid green;
      width:100px;
      overflow:auto;
    }
  </style>
</head>
<body>
  <div>
    <span style="display:block; width:200px;">
      This is some text. La la la. Da da da.
      This is some text. La la la. Da da da.
      This is some text. La la la. Da da da.
      ....some content.......
    </span>
  </div> 

</body>
</html>

                    Comment

                    Previous template Next
                    Working...