Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
  <div class="wrapper">
    <header><h1>Header</h1></header>
    <section class="main-content">
      <nav class="breadcrumbs">Bread > crumbs</nav>
      <nav class="left-nav">Left navigation</nav>
      <div class="content">Content</div>
    </section>
    <footer><h3>Footer</h3></footer>
  </div>
</body>
</html>
 
html, body { 
  
  height: 100%;
  margin: 0;
}
.wrapper { 
  
  background-color: #eee;
  display: table;
  margin:  0 auto;
  height:  100%;
  width:   400px;
  
}
.main-content { 
  
  display: table-row;
  height: 100%;
  
}
.breadcrumbs { 
  
  display: table-row;
  
}
.left-nav { 
  background-color: #cdef88;
  float: left;
  margin: 8px;
  width: 172px;
}
.content { 
  float: left;
  width: 168px;
  height: auto;
}
footer { 
  
  background-color: #e58b04;
  display: table-row;
  padding: 19px 19px 22px;
  
}
Output 300px

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

Dismiss x
public
Bin info
sunyatasattvapro
0viewers