Most Recent Member display

[Blue Ember 13]

There isn't one currently in the board stats. I've attempted adding one. But when someone registers a name that is too long,  it throws out the entire alignment of the stats.  So I've removed it for now.  Can anyone help with a code, and the placement so the most recent member will display somewhere in the stats? The html template is as follows

 

<div class="tableborder" id="boardstats">
	<div class="maintitle">
		<span class="bstats-text">Board Statistics</span>
	</div>

	<div id="new-statistics">
		<div class="new-stats-inside">
		<div class="new-stats-left">
			<div class="new-stats-online">
				<div> <!-- |online_list| --> </div>
			</div>

			<div class="new-stats-online-nums">
				<div> <span><!-- |total_users| --></span> • online </div>
				<div> <span><!-- |total_mems| --></span> • members </div>
				<div> <span><!-- |total_guests| --></span> • guests </div>
				<div> <span><!-- |total_anons| --></span> • hidden </div>


			</div>
			<div class="new-stats-details">
				<div class="new-stats-ontoday">
					<div> <!-- |online_today_list| --> </div>
				</div>
				<div class="new-stats-totals">
					<div class="new-stats-members">
						<span> <!-- |total_mem_reg| --> </span> Members
					</div>
					<div class="new-stats-posts">
						<span> <!-- |total_posts| --> </span> Posts
					</div>
					<div class="new-stats-ontoday-title">
						<span> <!-- |online_today| --> </span> today


			


 
		</div>
				</div>
				<div class="new-stats-buttons-left">
					<a href="?act=Online&CODE=listall&sort_key=click" title="Online Last Click" class="btn">
						<span class="th th-paper-plane-o"></span>
					</a>
					<a href="?act=Online&CODE=listall&sort_key=name&sort_order=asc&show_mem=reg" title="Sort By Name" class="btn">
						<span class="th th-return"></span>
					</a>
					<a href="?act=Stats" title="Today's Top 10" class="btn">
						<span class="th th-trophy-o"></span>
					</a>
					<a href="?act=Search&CODE=getactive" title="Active Topics" class="btn">
						<span class="th th-paperclip"></span>
					</a>
					<a href="?act=Stats&CODE=leaders" title="Staff Team" class="btn">
						<span class="th th-heart-1-o"></span>
					</a>
					<a href="#" title="<!-- |most_online_oneday| --> Online In One Day On <!-- |most_online_oneday_date| -->" class="btn">
						<span class="th th-fire-o"></span>
					</a>
				</div>
			</div>
		</div>
		<div class="new-stats-right">
			<div id="recent-topics-clip"></div>
		</div>
		<div class="clear"></div>
	</div>
	</div>
</div>

and the CSS

 

/* CUSTOM STATS */
#boardstats {
    display: block;
    background: #141414;
    height: 250px;
    background-image: url(https://files.jcink.net/uploads/marvel/skins/dark/drbgstats.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    margin: 40px 0;
    border: 1px dotted #222;
    background-blend-mode: screen;
}
#boardstats .maintitle {
    display: block;
    cursor: default;
    position: relative;
    background: url(https://files.jcink.net/uploads/marvel/skins/dark/asfalt_dark.png) top center fixed;
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 40px;
    color: #FFF;
    text-align: center;
    text-transform: uppercase;
    font-family: roboto;
    top: -99px;
}
.bstats-text {
    display: block;
    width: 160px;
    position: relative;
    font-size: 10px;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    font-family: roboto;
    text-decoration: none;
    color: #8e3b3b !important;
    font-weight: 700;
    background: #151515;
    padding: 10px;
    margin-bottom: -14px;
    margin-left: 100px;
}
#new-statistics {
    position: relative;
    margin-top: -99px;
}
.new-stats-inside {
    position: relative;
}
.new-stats-left {
    position: relative;
    float: left;
    width: 548px;
    height: 250px;
}
.new-stats-online {
    position: relative;
    margin: 15px;
    background-color: rgba(10, 10, 10, 0.5);
    height: 100px;
}
.new-stats-online div {
    padding: 15px;
    height: 70px;
    overflow: auto;
}
.new-stats-online-nums {
    position: relative;
    margin: -16px 15px 0px 15px;
    border-top: 1px solid #8e3b3b;
}
.new-stats-online-nums div {
    display: inline-block;
    padding: 10px;
    color: #b5b5b5;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px 8px;
}
.new-stats-details {
    position: relative;
    margin: 0px 15px;
}
.new-stats-ontoday {
    position: relative;
    float: left;
    width: 240px;
    background-color: rgba(10, 10, 10, 0.5);
    padding: 10px;
    height: 70px;
}
.new-stats-ontoday div {
    text-transform: uppercase;
    font-size: 8px;
    text-align: justify;
}
.new-stats-totals {
    position: relative;
    float: left;
}
.new-stats-members, .new-stats-posts, .new-stats-ontoday-title {
    display: block;
    border-bottom: 1px solid #202020;
    width: 100px;
    margin: 11px;
    padding-bottom: 3px;
    text-transform: uppercase;
    font-weight: bold;
    color: #8e3b3b;
}
.new-stats-members span, .new-stats-posts span, .new-stats-ontoday-title span {
    color: #aeaeae;
}
.new-stats-buttons-left {
    position: relative;
    float: right;
    width: 135px;
}
.new-stats-buttons-left a {
    font-size: 25px;
    display: inline-block;
    position: relative;
    margin: 9px;
    color: #8e3b3b;
}
.new-stats-right {
    position: relative;
    float: right;
    width: 350px;
    height: 250px;
    overflow: hidden;
}
#recent-topics {
    position: relative;
    margin-top: 20px;
    margin-left: 15px;
    width: 305px;
    height: 200px;
    overflow: auto;
    z-index: 1;
    counter-reset: my-topics-counter;
}
#recent-topics .maintitle {
    display: none;
}
#recent-topics > table {
    padding: 0px;
    width: 100%;
    text-transform: uppercase;
}
#recent-topics table tr {
    margin: 0;
    padding: 0;
}
#recent-topics tr:before {
    content: counter(my-topics-counter, decimal-leading-zero);
    counter-increment: my-topics-counter;
    margin: 0px;
    width: 30px;
    font-size: 15px;
    font-weight: 100;
    border-right: 1px solid #1b1b1b;
    background: transparent;
    display: inline-block;
    font-family: playfair display;
    text-transform: uppercase;
    color: #8e3b3b;
    text-align: center;
    padding: 8px 5px 5px 6px;
}
#recent-topics td.row4.recent-topics-info {
    color: transparent;
    line-height: 0%;
    width: 215px;
    padding-left: 10px;
    overflow: hidden;
}
#recent-topics .row4:first-child {
    text-align: left;
}
#recent-topics .recent-topics-info, #recent-topics .recent-topics-date {
    padding: 0px 0px 3px;
    vertical-align: top;
    background-color: transparent;
}
#recent-topics .recent-topics-info {
    width: 100%;
}
#recent-topics .recent-topics-info {
    padding: 10px 0px;
}
#recent-topics td.row4.recent-topics-info a {
    line-height: 120%;
}
#recent-topics td.row4.recent-topics-info a strong {
    font-size: 10px;
    display: block;
    font-family: montserrat;
    text-transform: uppercase;
    color: #aeaeae;
    letter-spacing: 0px;
    text-align: left;
}
#recent-topics .recent-topics-info a {
    font-size: 7px!important;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    color: #948a84;
    text-align: right;
}
#recent-topics a {
    color: #484848;
}
.recent-topics-date {
    display: none;
    position: absolute;
    width: 160px;
    left: 20px;
    margin-top: 25px;
    color: #383838;
    font-size: 8px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: .5px;
    text-align: right;
}