<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.

$https://compass-style.org/files/examples/blueprint/grid/blueprint_grid_columns: 8;
$https://compass-style.org/files/examples/blueprint/grid/blueprint_grid_width: 40px;
@import "https://compass-style.org/files/examples/blueprint/grid/blueprint";
.two-col {
  @include container;
  background-color: #cccccc;
  #header, #footer {
    @include column(8);
  }
  #sidebar {
    @include column(3);
  }
  #content {
    @include column(5, true);
  }
}

$https://compass-style.org/files/examples/blueprint/grid/blueprint_grid_columns : 8
$https://compass-style.org/files/examples/blueprint/grid/blueprint_grid_width : 40px
@import https://compass-style.org/files/examples/blueprint/grid/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: #cccccc;
}
.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;
}