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

            
              .wrapper {
  width: 300px;
}

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

.media {
    overflow: hidden;
    _overflow: visible;
    zoom: 1;
    margin: 10px 0;  
}
.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 ..................