How to make a div vertically scrollable

Try this:

index.html:

.pic-container {
  width: 600px;
  height: 600px;
  overflow-y: scroll;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div class="pic-container">
    <a href="writeA.html"><img src="images/A.png" /></a>
    <a href="writeB.html"><img src="images/B.png" /></a>
    <a href="writeC.html"><img src="images/C.png" /></a>
    <a href="writeD.html"><img src="images/D.png" /></a>
    <a href="writeE.html"><img src="images/E.png" /></a>
  </div>
</body>

</html>

you have to set fix height of your main div for horizontal scroll and if your inside content height exceed height of main div then horizontal scroll will come.

.pic-container {
  width: 1350px;
  margin: 0 auto;
  white-space: nowrap;
}

.pic-row {
  /* As wide as it needs to be */
  width: 1350px;
  height: 400px;
  overflow: auto;
}

.pic-row a {
  clear: left;
  display: block;
}
<div class="pic-container">
  <div class="pic-row">
    <a href="writeA.html"><img src="images/A.Png" /></a>
    <a href="writeB.html"><img src="images/B.Png" /></a>
    <a href="writeC.html"><img src="images/C.Png" /></a>
    <a href="writeD.html"><img src="images/D.Png" /></a>
    <a href="writeE.html"><img src="images/E.Png" /></a>
    <a href="writeF.html"><img src="images/F.Png" /></a>
    <a href="writeG.html"><img src="images/G.Png" /></a>
    <a href="writeH.html"><img src="images/H.Png" /></a>
    <a href="writeI.html"><img src="images/I.Png" /></a>
    <a href="writeJ.html"><img src="images/J.Png" /></a>
    <a href="writeK.html"><img src="images/K.Png" /></a>
    <a href="writeL.html"><img src="images/L.Png" /></a>
    <a href="writeM.html"><img src="images/M.Png" /></a>
    <a href="writeN.html"><img src="images/N.Png" /></a>
    <a href="writeO.html"><img src="images/O.Png" /></a>
    <a href="writeP.html"><img src="images/P.Png" /></a>
    <a href="writeQ.html"><img src="images/Q.Png" /></a>
    <a href="writeR.html"><img src="images/R.Png" /></a>
    <a href="writeS.html"><img src="images/S.Png" /></a>
    <a href="writeT.html"><img src="images/T.Png" /></a>
    <a href="writeU.html"><img src="images/U.Png" /></a>
    <a href="writeV.html"><img src="images/V.Png" /></a>
    <a href="writeW.html"><img src="images/W.Png" /></a>
    <a href="writeX.html"><img src="images/X.Png" /></a>
    <a href="writeY.html"><img src="images/Y.Png" /></a>
    <a href="writeZ.html"><img src="images/Z.Png" /></a>
  </div>
</div>

Use the css below 

.pic-container {
    width: 50px;
    height: 200px;
    overflow-y: scroll;
    overflow-x:hidden;
}

EDIT :- Added a '.' before the class name see the fiddle link HERE

Tags:

Html

Css

Recent Posts