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 6 | Margin, Padding and Box sizing</title>
  <meta name="description" content="Demo 6: Flexbox with margin, padding and borders">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
    <style>
      html, body {
        height: 100%;
        margin: 0;
      }
​
      body {
        display: flex;
        flex-direction: column;
        background: beige; 
      }
      
      #wrapper {
        display: flex;
        flex: 2 1 auto;
        flex-direction: row;
      }
      
      #sidebar {
        padding: 1rem;
        flex: 1 1 auto;
        background: lightgreen;
        border-right: 1px solid gray;
      }
      
      #map {
        margin: 1rem;
        padding: 1rem;
        flex: 3.14 1 auto;
        background: lightcyan;
        border: 1px solid gray;
      }
      
      #header {
        padding: 1rem;
        flex: 0 0 auto;
        background: lightgray;        
        border-bottom: 1px solid gray;
      }
      
      #footer {
        border-top: 1px solid gray;
        padding: 1rem;
        flex: 0 0 auto;
        background: lightgray;
      }
  </style>
</head>
<body>
  <div id="header">Header</div>
  <div id="wrapper">
    <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