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