title: How to make a div vertically scrollable
body: <p>I made a horizontal scroll with a list of picture elements.. But when I made to scroll it vertically I  failed to do it.</p>
  
  <p>my code for the horizontal scroller is </p>
  
  <pre><code>&lt;div class="pic-container" style="position:absolute; left: 3px; top: 102px;"&gt;
      &lt;div class="pic-row"&gt;
          &lt;div id="divd" style="width: 1680px;"&gt;
              &lt;a href="writeA.html"&gt;&lt;img src="images/A.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeB.html"&gt;&lt;img src="images/B.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeC.html"&gt;&lt;img src="images/C.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeD.html"&gt;&lt;img src="images/D.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeE.html"&gt;&lt;img src="images/E.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeF.html"&gt;&lt;img src="images/F.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeG.html"&gt;&lt;img src="images/G.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeH.html"&gt;&lt;img src="images/H.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeI.html"&gt;&lt;img src="images/I.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeJ.html"&gt;&lt;img src="images/J.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeK.html"&gt;&lt;img src="images/K.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeL.html"&gt;&lt;img src="images/L.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeM.html"&gt;&lt;img src="images/M.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeN.html"&gt;&lt;img src="images/N.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeO.html"&gt;&lt;img src="images/O.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeP.html"&gt;&lt;img src="images/P.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeQ.html"&gt;&lt;img src="images/Q.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeR.html"&gt;&lt;img src="images/R.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeS.html"&gt;&lt;img src="images/S.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeT.html"&gt;&lt;img src="images/T.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeU.html"&gt;&lt;img src="images/U.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeV.html"&gt;&lt;img src="images/V.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeW.html"&gt;&lt;img src="images/W.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeX.html"&gt;&lt;img src="images/X.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeY.html"&gt;&lt;img src="images/Y.Png" /&gt;&lt;/a&gt;
              &lt;a href="writeZ.html"&gt;&lt;img src="images/Z.Png" /&gt;&lt;/a&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The css I used is as follows </p>
  
  <pre><code>.pic - container {
    /* The width of mydocument */
    width: 1350 px;
    margin: 0 auto;
    white - space: nowrap;
    overflow - x: inherit;
    overflow - y: hidden; -
    ms - overflow - style: -ms - autohiding - scrollbar;
  
  }
  .pic - row {
    /* As wide as it needs to be */
    width: 1527 px;
  }
  </code></pre>
  
  <p>Please Guide me to found a solution to make that horizontal scrolling div into vertical scrolling</p>