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="content">
      <div class="content__left">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
      </div>
      <div class="content__right">
        right div<br/>right div<br/>right div<br/>right div<br/>
      </div>
      <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
      </div>
    </div>
  </body>
</html>
 
/*
 * Make a div fill up the remaining width
 * 
 * http://stackoverflow.com/questions/4873832/make-a-div-fill-up-the-remaining-width/22719552#22719552
 *
 * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
 * [2] "overflow: auto;" makes this div take the remaining width
 */
.content { 
  width: 100%; 
}
.content__left { 
  width: 100px;
  float: left; /* [1] */
  background-color: #fcc;
}
.content__middle { 
  background-color: #cfc; 
  overflow: auto; /* [2] */
}
.content__right { 
  width: 100px; 
  float: right; /* [3] */
  background-color: #ccf; 
}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers