how do divide epaper into no of regions

i have created one demo for you just check it.. :)

In this demo i have passed content and image url to mainDisplay div to display content of epaper,
here i have set same image url to main display div to display but you can set big image url instead of it.. :)



css

.SideBar
     {
         float: left;
         background-color: Red;
         width:10%;
     }
     .ContantDiv
     {
         width:90%;
         float: left;
         background-color: Yellow;
     }
     #MainDisplay
     {
         height:450px;
         width:100%;

         }

JAVASCRIPT


SET online link first <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

function getimg(image,Content) {

          $("#MainDisplay").empty();
          $("#MainDisplay").append("<tr><td><img src="http://epaper.thehimalayantimes.com/EpaperImages/362014/362014-md-hr-"+image+"ss.jpg"></img></td></tr><tr><td>"+Content+"</td></tr>");

      }

HTML

<div>
        <div class="SideBar">
            <table>
                <tr>
                    <td>
                        <img class="selected"  önclick="getimg('5','content1');" id="spanthumbNumber5" src="http://epaper.thehimalayantimes.com/EpaperImages/362014/362014-md-hr-5ss.jpg">
                    </img></td>
                </tr>
                <tr>
                    <td>
                        <img class="selected"  önclick="getimg('6','content2');" id="Img1" src="http://epaper.thehimalayantimes.com/EpaperImages/362014/362014-md-hr-6ss.jpg">
                    </img></td>
                </tr>
               
            </table>
        </div>
        <div class="ContantDiv">
        <div id="MainDisplay">
        </div>
        </div>
    </div>