Make ul align on the right verticle

Question

Thanks for viewing my issue.

I was wondering how do I make the ul align on the right of the div vertically. I just don't really know that much of CSS and HTML. Can anyone help me out?? The ul is horizontal and want it to be vertical as shown in the attached picture.

CSS

#userStats { display: block; width: auto; background-color: #f9f9f9; border: 1px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 12px; }

#userStats .pic { float: left; display: block; margin-right: 10px; }
#userStats .pic a img { padding: 7px; background: #fff; border: 1px solid #ccc; }

#userStats .data {
    float: left;
    display: block;
    position: relative;
    width: 515px;
    height: 166px;
    padding: 4px;
    padding-left: 15px;
    background: #e6e6e6;
    overflow: hidden;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#userStats .data h1 { color: #474747; line-height: 1.6em; text-shadow: 0px 1px 1px #fff; }
#userStats .data h3 { color: #666; line-height: 0.9em; margin-bottom: 5px; }
#userStats .data h4 { font-size: 1.2em; line-height: 1.3em; }

#userStats .data .socialMediaLinks { position: absolute; right: 6px; top: 8px; }
#userStats .data .socialMediaLinks a img { margin-right: 5px; }

#userStats .data .sep { clear: both; margin-top: 20px; width: 485px; height: 1px; border-bottom: 1px solid #ccc; margin-bottom: 0; }
#userStats .data ul.numbers { list-style: none; width: 320px; padding-top: 7px; margin-top: 0; border-top: 1px solid #fff; color: #676767; }
#userStats .data ul.numbers li { width: 95px; float: left; display: block; padding-left: 8px; height: 50px; border-right: 1px dotted #bbb; text-transform: uppercase; }
#userStats .data ul.numbers li strong { color: #434343; display: block; font-size: 3.4em; line-height: 1.1em; font-weight: bold; }

HTML

<div class="data">
 <h1>Bill Gates</h1>
 <h3>CEO of Microsoft Corporation</h3>
 <h3>San Francisco, CA</h3>
 <h4><a href="http://spyrestudios.com/">http://spyrestudios.com/</a></h4>
 <div class="socialMediaLinks">
    <a href="http://twitter.com/jakerocheleau" rel="me" target="_blank">
      <img src="img/twitter.png" alt="@jakerocheleau" />
    </a>
    <a href="http://gowalla.com/users/JakeRocheleau" rel="me" target="_blank">
       <img src="img/gowalla.png" />
    </a>
  </div>
<div class="sep"></div>
  <ul class="numbers clearfix">
    <li>Reputation<strong>185</strong></li>
    <li>Checkins<strong>344</strong></li>
    <li class="nobrdr">Days Out<strong>127</strong></li>
  </ul>
</div>

Answer 1

Just float the list to the right

.numbers {
    float:right;
}

FIDDLE

Answer 2

Give float your UL

.numbers { float:right }