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">
      max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
      max-width of 250px & min-width of 80px<br />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: 20%; 
  max-width: 170px;  
  min-width: 40px;  
  float: left; /* [1] */
  background-color: #fcc; 
}
.content__middle { 
  background-color: #cfc; 
  overflow: auto; /* [2] */
}
.content__right { 
  width: 20%; 
  max-width: 250px; 
  min-width: 80px; 
  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