<div class='two-col'>
  <div id='header'>
    <h1>This is the Header</h1>
  </div>
  <div id='sidebar'>
    <ul>
      <li>
        <a href='#'>Nav #1</a>
      </li>
      <li>
        <a href='#'>Nav #2</a>
      </li>
      <li>
        <a href='#'>Nav #3</a>
      </li>
    </ul>
  </div>
  <div id='content'>
    <p>
      Lorem ipsum dolor sit amet,
      consectetur adipisicing elit, sed do
      eiusmod tempor incididunt ut labore et
      dolore magna aliqua.
    </p>
  </div>
  <div id='footer'>
    This is the footer.
  </div>
</div>

.two-col
  #header
    %h1 This is the Header
  #sidebar
    %ul
      %li
        %a(href="#") Nav #1
      %li
        %a(href="#") Nav #2
      %li
        %a(href="#") Nav #3
  #content
    %p
      Lorem ipsum dolor sit amet,
      consectetur adipisicing elit, sed do
      eiusmod tempor incididunt ut labore et
      dolore magna aliqua.
  #footer
    This is the footer.

$blueprint_grid_columns: 8;
$blueprint_grid_width: 40px;

@import "blueprint";

.two-col {
  @include container;
  background-color: #cccccc;
  #header, #footer {
    @include column(8);
  }
  #sidebar {
    @include column(3);
  }
  #content {
    @include column(5, true);
  }
}

$blueprint_grid_columns : 8
$blueprint_grid_width : 40px

@import blueprint

.two-col
  +container
  background-color: #ccc
  #header, #footer
    +column(8)
  #sidebar
    +column(3)
  #content
    +column(5, true)
  
 

.two-col{width:390px;margin:0 auto;overflow:hidden;*zoom:1;background-color:#ccc}.two-col #header,.two-col #footer{display:inline;float:left;margin-right:10px;width:390px}* html .two-col #header,* html .two-col #footer{overflow-x:hidden}.two-col #sidebar{display:inline;float:left;margin-right:10px;width:140px}* html .two-col #sidebar{overflow-x:hidden}.two-col #content{display:inline;float:left;margin-right:0;width:240px}* html .two-col #content{overflow-x:hidden}