CodePen

HTML

            
              <div class="wrapper">
  <h2>Right Rail - Smaller Text</h2>

  <div id="rightRail">
    <div class="media">
      <a href="http://twitter.com/thierrykoblentz" class="pull-left">
        <img src="http://0.gravatar.com/avatar/a1c5c36dfde41ff8c4a92c94180b2dbf?s=78&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D78&r=G" alt="me" width="40" />
      </a>
      <small>@thierrykoblentz 14 minutes ago</small>
    </div>
  </div>

  <h2>Default</h2>

  <div class="media">
    <a href="http://twitter.com/thierrykoblentz" class="pull-left">
      <img src="http://0.gravatar.com/avatar/a1c5c36dfde41ff8c4a92c94180b2dbf?s=78&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D78&r=G" alt="me" width="40" />
    </a>
    @thierrykoblentz 14 minutes ago
  </div>

  <h2>Float Right</h2>

  <div class="media">
    <a href="http://twitter.com/thierrykoblentz" class="pull-right">
      <img src="http://0.gravatar.com/avatar/a1c5c36dfde41ff8c4a92c94180b2dbf?s=78&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D78&r=G" alt="me" width="40" />
    </a>
    @thierrykoblentz 14 minutes ago
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  background: #333;
}
.wrapper {
  width: 300px;
  margin: 0 auto;
  background: white;
  padding-top: 1px;
}

h2 {
  font-size: 14px;
  text-transform: uppercase;
  padding-left: 10px;
  line-height: 20px;
}

.pull-left {
  float: left;
}
.pull-right {
  float: right;
}

.media {
    overflow: hidden;
    _overflow: visible;
    zoom: 1;
    padding: 5px;
    background: #ccc;
}
.media a {
  margin: 0 10px;
  display: block;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................