Make content horizontally scroll inside a div

Make content horizontally scroll inside a div

<div class="container-outer">
   <div class="container-inner">
      <!-- Your images over here -->
   </div>
</div>

With this stylesheet:

.container-outer { overflow: scroll; width: 500px; height: 210px; }
.container-inner { width: 10000px; }

You can even create an intelligent script to calculate the inner container width, like this one:

$(document).ready(function() {
   var container_width = SINGLE_IMAGE_WIDTH * $(".container-inner a").length;
   $(".container-inner").css("width", container_width);
});

How to make a div vertically scrollable

<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>

                <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="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>

CSS

.pic-container {

    width: 50px;

    height: 200px;

    overflow-x: scroll;

}