Bottom floated elements stack

dabblet.css

/**
 * Bottom floated elements stack
 */
body { background: #999; font-family: Helvetica; }
* { box-sizing: border-box; }
.cf:before,.cf:after { content: " "; display: table; }
.cf:after { clear: both; }

.the-dialog { width:500px; background: #fff; margin: 10px auto; box-shadow: 0 0 5px; }
.the-dialog__top { background: #eee url('https://dl.dropboxusercontent.com/u/31132753/pics/small_bg.jpg'); background-size:cover; background-position:50% 25%; padding: 20px; }
.top__cnt { height:130px; position:relative; }
.the-title { position: absolute; bottom:0; max-width:calc(100%); color: white; text-shadow: 0 1px 2px #000; }
.title__main { font-weight: bold; font-size: 20px; margin-bottom: 5px; }
.btn { display:inline-block; text-decoration:none; color: #fff; background: #aaa; padding: 7px 10px; border-radius:5px; }

.the-dialog__controls { padding: 20px; }
.user_avatar { width:50px; height:50px; background: #333; border-radius: 50%; margin-right: 20px; float:left; }
.rest_controlls { float:left; width:100%; }
.user_avatar + .rest_controlls { max-width: calc(100% - 70px); /*border: 1px solid red;*/ }
.sub_footer-part { width: 50%; float:left; }
.sub_footer-part--right { text-align: right; }
.user_quote { padding:0; margin: 0; margin-bottom: 10px; }

dabblet.html

<div class="the-dialog">
	<div class="the-dialog__top">
		<div class="top__cnt cf">
			<div class="the-title">
				<div class="title__main">Kostas Kapenekakis</div>
				<div class="title__desc">IT engineer, web developer, FreeBSD fan, passionate about open standards, design fetishist, experimental cook, cyclist.
</div>
			</div>
		</div>
	</div>
	<div class="cf the-dialog__controls">
		<div class="user_avatar"></div>
		<div class="rest_controlls">
			<div>
				<p class="user_quote">Si vis pacem, para bellum.</p>
				<b>Julius Caesar</b>
				<hr>
			</div>
			<div>
				<div class="sub_footer-part sub_footer-part--left">
					Bla bla<br>
					Bla bla
				</div>
				<div class="sub_footer-part sub_footer-part--right">
					<a class="btn" href="mailto:[email protected]">Mail me</a>
				</div>
			</div>
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}