Sample JavaScript code

<script type="text/javascript">
   new wrapScroll('movable-left','wrap');
   new wrapScroll('movable-right','wrap');
</script>

Sample CSS Layout code

/* -- layout -- */
#wrap {
   width:100%;
   float:left;
}
#content {
   margin-left:200px;
   margin-right:200px;
}
#movable-left {
   width:160px;
}
#sidebar-right {
   float:right;
   margin-left:-190px;
   width:190px;
}
#movable-right {
   width:160px;
}

Sample CSS Design code

/* -- design -- */
#content .column {
   background-color:#fff;
   border:8px solid #eee;
   padding:8px;
   margin-bottom:10px;
   height:2000px;
}
#movable-left, #movable-right {
   background-color:#f1f5fa;
   border:8px solid #c9d8ed;
   padding:8px;
   height:150px;
}
code {
   display:block;
   margin:8px 0px;
   padding:8px;
   font-size:small;
   color:#008000;
   line-height:130%;
   background:#fbfbfc;
   border:1px solid #eee;
}

Sample HTML body code

<body>
<div id="container">

   <div id="wrap">
   <div id="sidebar-left">
   <div id="movable-left">#movable</div>
   </div>

   <div id="content">
   <div class="column">#content .column</div>
   </div>

   </div>
   <!-- end of wrap -->

   <div id="sidebar-right">
   <div id="movable-right">#movable</div>
   </div>
</div>
<!-- end of container -->
</body>
© youmos.com