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>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <nav>
      <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
      </ul>
    </nav>
    <main>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui recusandae autem sunt minus numquam impedit magnam corporis, dolores itaque animi tempore quisquam placeat illum aliquid cum voluptas assumenda dolorem ipsum sequi debitis neque? Vel quasi, quas autem ipsum, asperiores in eveniet iste repudiandae nihil ab molestias hic suscipit dolor possimus totam nam. Optio, eveniet, corporis. Ipsam asperiores ducimus debitis nobis, architecto quibusdam porro deleniti hic, fugiat obcaecati, itaque laboriosam aspernatur quas, dolorem molestiae ratione. Recusandae assumenda veniam reiciendis natus temporibus aliquam ullam doloremque quisquam officia, enim unde at voluptatum debitis totam rem earum quia laudantium! Magni nam quos, atque iusto.
    </main>
  </div>
  <footer>
    <div>
      Place sticky footer content here.
    </div>
  </footer>
</body>
</html>
 
html {
  position: relative;
  min-height: 100%;
}
body {
  padding: 0;
  margin: 0;
  background: #fff;
  margin-bottom: 60px;
}
.container {
  padding: 0 10px;
  max-width: 640px;
  margin: auto;
}
nav {  
  padding: 20px 0;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: table-cell;
  width: 1%;
  text-align: center;
}
nav ul li a {
  display: block;
  border: 1px solid #dcdcdc;
  border-right: none;
  color: #555;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
  background: linear-gradient(#fff, #eee);
  padding: 10px 0;
}
nav ul li:first-child a {
  border-radius: 5px 0 0 5px;
}
nav ul li:last-child a {
  border-right: 1px solid #dcdcdc;
  border-radius: 0 5px 5px 0;
}
nav ul li a:hover {
  color: #333;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #444;
  color: #fff;
}
footer > div {
  max-width: 640px;
  margin: auto;
  padding: 20px 10px 0;
}
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers