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 8 | Positioning</title>
  <meta name="description" content="Demo 8: positioning">
  <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 {
      position: relative;
      text-align: center;
      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;
    }
​
    .control {
      background: lightcoral;
      position: absolute;
      padding: 1rem;
    }
​
    .top {
      top: 10px;
    }
​
    .left {
      left: 10px;
    }
​
    .bottom {
      bottom: 10px;
    }
​
    .right {
      right: 10px;
    }
​
    @media screen and (max-width: 1024px) { 
      #wrapper {
        flex-direction: column;
      }
​
      #map {
        flex: 1 1 auto;
        order: 1;
        margin: 0;
        border: none;
        min-height: 50vh;
      }
​
      #sidebar {
        max-width: 100%;
        order: 2;
        overflow: auto;
      }
    }
  </style>
</head>
<body>
  <div id="header">Header</div>
  <div id="wrapper">
    <div id="sidebar">Sidebar</div>
    <div id="map">
      Map
      <div class="control top left">Top Left</div>
      <div class="control bottom left">Bottom Left</div>
      <div class="control top right">Top Right</div>
      <div class="control bottom right">Bottom Right</div>
    </div>
  </div>
  <div id="footer">Footer</div>
</body>
</html>
Output

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

Dismiss x
public
Bin info
patrickarltpro
0viewers