Demo: Two Column Layout

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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