<h1>Testing joined images (circles) in fluid layout</h1>
<div class="line">
		<div class="row cf">
				<div class="block fl">
						<p><span class="circle first"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper risus consequat mauris dapibus, ut aliquet odio posuere. Quisque enim quam, semper quis dui sed, pellentesque consectetur augue. Nam convallis diam lacus, vel posuere lacus adipiscing et. Nulla venenatis dui quis laoreet blandit. Phasellus pulvinar lectus vel turpis varius, et ultrices tortor eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce blandit tellus nec semper gravida. Nunc faucibus enim non dolor eleifend commodo</p>
				</div>
				<div class="block fr">
						<p><span class="circle"></span>Quisque enim quam, semper quis dui sed, pellentesque consectetur augue. Nam convallis diam lacus, vel posuere lacus adipiscing et. Nulla venenatis dui quis laoreet blandit. Phasellus pulvinar lectus vel turpis varius, et ultrices tortor eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce blandit tellus nec semper gravida. Nunc faucibus enim non dolor eleifend commodo</p>
				</div>
				<div class="block fl">
						<p><span class="circle"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper risus consequat mauris dapibus, ut aliquet odio posuere. Quisque enim quam, semper quis dui sed, pellentesque consectetur augue. Nam convallis diam lacus, vel posuere lacus adipiscing et. Nulla venenatis dui quis laoreet blandit. Phasellus pulvinar lectus vel turpis varius, et ultrices tortor eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
				</div>
				<div class="block fr">
						<p><span class="circle last"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper risus consequat mauris dapibus, ut aliquet odio posuere. Quisque enim quam, semper quis dui sed, pellentesque consectetur augue. Nam convallis diam lacus, vel posuere lacus adipiscing et. Nulla venenatis dui quis laoreet blandit. Phasellus pulvinar lectus vel turpis varius, et ultrices tortor eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce blandit tellus nec semper gravida. Nunc faucibus enim non dolor eleifend commodo</p>
				</div>
		</div>
</div>

/* apply a natural box layout model to all elements */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html, body {
	margin:0;
	padding:0
}
body {
	background:#000;
	color:#fff;
}
.cf:before, .cf:after {
	content: " ";
	display: table;
}
.cf:after { clear: both; }
.cf { *zoom: 1;
}
p {
	margin:0 0 1em;
	padding:10px;
}
.line {
	position:relative;
	width:80%;
	margin:auto;
	overflow:hidden;
}
.line:after {
	content:" ";
	width:1px;
	background:#fff;
	position:absolute;
	z-index:1;
	top:0;
	bottom:0;
	left:50%;
}
.fl { float:left; }
.fr { float:right; }
.block {
	width:50%;
	position:relative;
	padding:0 50px 0 0;
	clear:both
}
.fr { padding:0 0 0 50px; }
.circle {
	width:50px;
	height:50px;
	border-radius:50%;
	background:red;
	float:right;
	margin-right:-85px;
	margin-top:1em;
	position:relative;
	z-index:2;
}
.fr .circle {
	float:left;
	margin-left:-85px
}
.circle.first:before,.circle.last:before{
	content:" ";
	position:absolute;
	width:4px;
	left:50%;
	margin:0 0 0 -2px;
	background:#000;
	bottom:100%;
	height:99em;
	z-index:3;
	background:#000;
}
.circle.last:before{
	bottom:auto;
	top:100%;	
}