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>
<style>
  html {
    font-family: sans-serif;
    padding: 2em 5em;
  }
  
  /* Container of both floated and non-floated content. Should contain all
   * floated and non-floated content, so it needs to establish a new block
   * formatting context without using overflow: hidden.
   */
  .container {
    outline: solid 3px #faa;
  }
  
  /* A fixed-width sidebar. */
  .sidebar {
    float: left;
    width: 160px;
    background: #afa;
  }
  
  /* The main content. Needs to make space for the sidebar. */
  .main {
    background: #aaf;
    margin-left: 160px;
  }
  
  /* An element with clear: both set on it. This element will be pushed below 
   * the end of the sidebar if the main content area doesn't establish a new
   * block formatting context.
   */
  .clear {
    color: #900;
    display: block;
    clear: both;
  }
  
  /* Establishes a new block formatting context. */
  .block-formatting-context {
    display: inline-block;
    width: 100%;
    zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
  }
</style>
​
<h1>Left-right layout using floats</h1>
​
<p>
  We want to create a two-column layout with a fixed-width sidebar and a
  flexible main content region. We simply float the sidebar left and give it 
  a fixed width. Then we make the main content element a block with a
  <code>margin-left</code> equal to the sidebar width. This is our starting
  point, and we'll work through the problems one at a time until it does
  everything we need. This method can also handle adding a fixed-width
  right-side sidebar.
</p>
​
<h2>Shorter sidebar content</h2>
<p>
  If the sidebar content is shorter, the container should be the height of the
  main content. This just works.
</p>
<div class="container">
  <div class="sidebar">
    shorter sidebar
  </div>
  <div class="main">
    longer<br/>main<br/>content
  </div>
</div>
​
<h2>Longer sidebar content</h2>
<p>
  If the main content is shorter, the container should be the height of the
  sidebar. This shows the problem. Notice how the sidebar spills out of the 
  container.
</p>
<div class="container">
  <div class="sidebar">
    longer<br/>sidebar<br/>content
  </div>
  <div class="main">
    shorter main content
  </div>
</div>
​
<div style="clear:both"></div>
<p>
  Instead of the most common solution, an approach called clearfix, it's 
  better to make the container establish a new block formatting context by 
  setting it its display to inline-block and giving it a width of 100% (to make it behave 
  like a block element).
</p>
<div class="container block-formatting-context">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="block-formatting-context">
      shorter main content
    </div>
  </div>
</div>
​
<h2>Using <code>clear:both</code> in the main content</h2>
<p>
  If there's an element inside the main content area that uses 
  <code>clear:both</code>, it should not get pushed below the end of the
  sidebar. This demonstrates the problem.
</p>
<div class="container block-formatting-context">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    main content
    <span class="clear">
      main content that uses <code>clear: both</code>
    </span>
  </div>
</div>
​
<p>
  And here it has been fixed by wrapping all of the main content in an element
  that establishes a new block formatting context.
</p>
<div class="container block-formatting-context">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="block-formatting-context">
      main content
      <span class="clear">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>
​
 
if (document.getElementById('hello')) {
  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';
}
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers