<!-- STEP 1: Abstract -->
<aside class="sidebar float--left">
  <h2>Left Sidebar</h2>
  <ul  class="list--bare list--underlined">
    <li>
      <h4><a class="link--content" href="#">Item header</a></h4>
      <p>Item content body.</p>
    </li>
    <li>
      <h4><a class="link--content" href="#">Item header</a></h4>
      <p>Item content body.</p>
    </li>
    <li>
      <h4><a class="link--content" href="#">Item header</a></h4>
      <p>Item content body.</p>
    </li>
  </ul>
</aside>

<aside class="sidebar float--right align--right">
  <h2>Right Sidebar</h2>
  <ul  class="list--bare list--underlined">
    <li>
      <h4><a class="link--content" href="#">Item header</a></h4>
      <p>Item content body.</p>
    </li>
    <li>
      <h4><a class="link--content" href="#">Item header</a></h4>
      <p>Item content body.</p>
    </li>
    <li>
      <h4><a class="link--content" href="#">Item header</a></h4>
      <p>Item content body.</p>
    </li>
  </ul>
</aside>


<!-- STEP 1: Abstract -->
<footer class="footer float--clear">
  <h2>Footer Section</h2>
  <ul class="list--bare list--underlined">
    <li>
      <h4><a class="link--content" href="#">Item header</a></h4>
      <p>Item content body.</p>
    </li>
    <li>
      <h4><a class="link--content" href="#">Item header</a></h4>
      <p>Item content body.</p>
    </li>
    <li>
      <h4><a class="link--content" href="#">Item header</a></h4>
      <p>Item content body.</p>
    </li>
  </ul>
</footer> 
@import "compass/css3";

p {
  margin: .5em 0;
  font-size: .9em;
  line-height: 1.2em;
}

h2 {
  margin: 0 0 1em;
  font-size: 1.25em;
}

h4 {
  margin: 0;
  font-size: 1em;
}

.float--left { float: left; }
.float--right { float: right; }
.float--clear { clear: both; }

.align--right { text-align: right; }

.footer { padding-top: 3em; }

.sidebar { width: 15em; }

.list--bare {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list--underlined li {
  margin: 1em 0;
  padding-bottom: .5em;
  border-bottom: 1px solid #ccc;
}

.link--content {
  color: #000;
  text-decoration: none;
}

.link--content:hover {
  color: #1c86a1;
}









html { background: #fcfcfc; font-family: "Trebuchet MS", Arial; margin: 20px 40px; }
h1 { margin-bottom: 2em; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js