Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
​
    .test_frame {position:relative; margin: 20px; width: 570px;  background:pink;}
    .test_content {position: relative; background: red; }
    
    .test_top {position: absolute; top: -20px; height:20px; width:100%; background:purple;}
    .test_top_left {position: absolute; top: 0; height:20px; left: -28px; width:28px; background:yellow;}
    .test_top_right {position: absolute; top: 0; height:20px; right: -28px; width:28px; background:lightblue;}    
    
    .test_bottom {position: absolute; bottom: -20px;height:20px; width:100%; background:lightgreen;}    
    .test_bottom_left {position: absolute; bottom: 0; height:20px; left: -28px; width:28px; background:gray;}
    .test_bottom_right {position: absolute; bottom: 0; height:20px; right: -28px; width:28px; background:orange;}    
    
    .test_mid {position: relative; background: #0f0;}
    
    .test_mid_right {position: absolute; right: -28px; height: 20%; width:28px; background:turquoise; }
    .test_mid_left {position: absolute; left: -28px; height: 100%; width:28px; background:black;}    
​
    .test_mid_center {background: #eee;}
​
​
    </style>relative
  </head>
  <body>
      <div class="test_frame">
        <div class="test_content">
​
                <div class="test_mid">
                    <div class="content">
                         <div id="cc">
                         <p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do
                           iusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                           <p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod werwerwerwerwerwr
                             
                             zxczczxczxc
                             
                             
                             zczczxcz
                             zczczcz
                             zxczczx
                            ii=0-
                             
                             as
                             as
                             u-u
                             <br><br><br><br>
                             zxczxc
                             zczxcz<br/>
                             zczxc<br/>
                             zczxc<br/>
                             zczxczx
                             
                           
-
                         </div>
                         <p><a href="javascript:toggleContent('cc',1)">short</a>, <a href="javascript:toggleContent('cc',3)">longer</a> or <a href="javascript:toggleContent('cc',10)">very long</a>.</p>
                    </div>
                </div>
​
    
 
        </div>
      </div>
<script type="text/javascript">
function toggleContent(name,n) {
    var i,t='',el = document.getElementById(name);
    if (!el.origCont) el.origCont = el.innerHTML;
    
    for (i=0;i<n;i++) t += el.origCont;
    el.innerHTML = t;
    }
</script>
</body>
</html>
​
​
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers