locked
Horizontal scrolling div problem

    Question

  • Hello all. I have a div container with child divs floated left with basically the the following mark-up:

    <div class="container"> <div id="list"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div>

    First off I can't get the horizontal scrollbar for #list to appear. What CSS is required to make that happen? When I try to scroll right in #list to see the rest of the hidden .item divs I can't scroll past the first hidden .item div. The result is a bounce back effect. I would like a simple carousel-like view. Can anyone help me with this? Thanks.
    Thursday, November 22, 2012 7:51 AM

Answers

  • Hi,

    Please try the code as follow:

    <div class="row">
      <div class="block">aa</div>
      <div class="block">bb</div>
      <div class="block">cc</div>
    </div>

        <style type="text/css">
            .row {
                width: 100%;
                margin: 0 auto;
            }
    
            .block {
                width: 100px;
                display: inline-block;
            }
        </style>


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    • Marked as answer by Song Tian Wednesday, November 28, 2012 9:54 AM
    Friday, November 23, 2012 9:42 AM

All replies

  • Hi,

    Please try the code as follow:

    <div class="row">
      <div class="block">aa</div>
      <div class="block">bb</div>
      <div class="block">cc</div>
    </div>

        <style type="text/css">
            .row {
                width: 100%;
                margin: 0 auto;
            }
    
            .block {
                width: 100px;
                display: inline-block;
            }
        </style>


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    • Marked as answer by Song Tian Wednesday, November 28, 2012 9:54 AM
    Friday, November 23, 2012 9:42 AM
  • i have the same problem, is there any css code to make the div (width:10000px) horizontal scrolling

    thanks.

    Wednesday, November 28, 2012 11:32 AM