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>
  <title>Demo 4a | Box sizing</title>
  <meta name="description" content="Demo 4a: The altering the box model.">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
    <style>
      html, body {
        height: 500px;
        margin: 0;
      }
​
      #wrapper {
        height: 100%;
      }
      
      #map {
        box-sizing: border-box;
        padding: 1rem;
        float: right;
        background: lightcyan;
        width: 70%;
        height: 100%;
      }
​
      #sidebar {
        box-sizing: border-box;
        padding: 1rem;
        float: left;
        background: lightgreen;
        width: 30%;
        height: 100%;
      }
      
      #footer {
        padding: 1rem;
        background: lightgray;
        width: 100%;
        height: 24px;
      }
      
      .clearfix:after {
        content: "";
        display: table;
        clear: both;
      }
  </style>
</head>
<body>
  <div id="wrapper" class="clearfix">
    <div id="sidebar">Sidebar</div>
    <div id="map">Map</div>
  </div>
  <div id="footer">Footer</div>
</body>
</html>
Output 300px

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

Dismiss x
public
Bin info
patrickarltpro
0viewers