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>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="header">
​
<div class="middle-section">
​
​
      <ul id="main-links">
        <li><a href="#section-one">Section One</a></li>
        <li><a href="#section-two">Section Two</a></li>
        <li><a href="#section-three">Section Three</a></li>
        <li><a href="#section-four">Section Four</a></li>
            <li><a href="#section-five">Section five</a></li>
      </ul>
​
  <div id="bar1"></div>
​
      <div id="bar2"></div>
​
      <div id="bar3"></div>
​
   </div>
​
</div> <!--end of header -->
</body>
</html>
 
.middle-section
{
 width:1000px;
 position:relative;
 margin:0 auto;
}
​
#header
{
 background:#fff;
 color:#666;
}
​
#header .middle-section
{
 position: relative;
 min-height:100px;
 background:#f7f7f7;
 border-bottom: 1px solid #666;
}
​
div#bar1 {
position:absolute;
top:0;
left:200px;
width:133px;
height: 1000px;
background-color: #f00;
z-index: 99;
}
​
div#bar2 {
position:absolute;
 top:0;
 left:400px;
 width:133px;
 height: 1000px;
 background-color: #f00;
 z-index: 99;
}
​
div#bar3 {
 position:absolute;
 top:0;
 left:600px;
 width:133px;
 height: 2000px;
 background-color: #f00;
 z-index: 99;
 }
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers