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 class='container'>
    <div class='leftNav'>
       <div class="green"></div>
      <div class="blue"></div>
    </div>
      
     <div class='rightNav'>
       <div class="right"></div>
       <div class="right"></div>
       <div class="right"></div>
       <div class="right"></div>
       <div class="right"></div>
       <div class="right"></div>
     </div>
      
  </div><!-- main container closing tag  -->
</div>
</body>
</html>
 
/* .left {
    float:left;
    width:100px;
}
.right {
    float:right;
    width:400px;
}
body {
    width:500px;
}
div {
    outline:solid red 1px;
    padding-bottom: 20px;
}
.blue {
    outline-color:blue;
    width: 75px;
}
.green {
    outline-color:green;
    height:100px;
} */
​
.container {
  width: 450px;
  height: 300px;
  background: #f2f2f2;
  position: relative;
}
.leftNav {
  width: 120px;
  height: auto;
  float: left;
}
.rightNav {
  width: 320px;
  height: auto;
  float: right;
}
.green {
  border: solid thin green;
  width: 120px;
  height: auto;
  padding-bottom: 135px;
  background: green;
}
.blue {
  border: solid thin blue;
  width: 120px;
  height: auto;
  padding-bottom: 75px;
  background: blue;
}
.right {
  width: 320px;
  height: 45px;
  background: gray;
  margin:3px 0;
}
Output

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

Dismiss x
public
Bin info
mnaresh2010pro
0viewers