Floating boxes and wrapping

by kmouse

HTML

<div class="wrapper">

<div class="paragraph">In consectetur, neque dignissim tincidunt dapibus, <span class="outer">leo metus molestie erat, eu <span class="inner">pharetra velit nunc in</span> ipsum. Donec aliquet malesuada <span class="inner">iaculis.</span></span> Quisque maximus urna in congue placerat. In hac habitasse platea dictumst. Mauris a fringilla augue. Donec posuere ante at orci efficitur porttitor vitae ac tellus. Nunc nec sapien orci. Sed rhoncus et dui sed sagittis. Nullam <span class="outer">venenatis <span class="inner">quis</span> <span class="inner">elit</span> vel mattis</span>. In mattis erat et blandit aliquam. Aliquam erat volutpat.</div>

<hr>

<div class="box">Float</div><div class="paragraph"><span>In</span> consectetur, neque dignissim tincidunt dapibus, leo metus molestie erat, eu pharetra velit nunc in ipsum. Donec aliquet malesuada iaculis. Quisque maximus urna in congue placerat. In hac habitasse platea dictumst. Mauris a fringilla augue. Donec posuere ante at orci efficitur porttitor vitae ac tellus. Nunc nec sapien orci. Sed rhoncus et dui sed sagittis. Nullam venenatis quis elit vel mattis. In mattis erat et blandit aliquam. Aliquam erat volutpat.</div>

<hr>

<div class="paragraph"><div class="box">Float</div><span>In</span> consectetur, neque dignissim tincidunt dapibus, leo metus molestie erat, eu pharetra velit nunc in ipsum. Donec aliquet malesuada iaculis. Quisque maximus urna in congue placerat. In hac habitasse platea dictumst. Mauris a fringilla augue. Donec posuere ante at orci efficitur porttitor vitae ac tellus. Nunc nec sapien orci. Sed rhoncus et dui sed sagittis. Nullam venenatis quis elit vel mattis. In mattis erat et blandit aliquam. Aliquam erat volutpat.</div>

<hr>

<div class="paragraph">In consectetur, neque dignissim tincidunt dapibus, <div class="box">Float</div> <span>leo</span> metus molestie erat, eu pharetra velit nunc in ipsum. Donec aliquet malesuada iaculis . Quisque maximus  urna in congue...

CSS

hr {
	clear: both;
	margin: 15px;
	display: block;
}

.paragraph {
	display:  flow-root;
	margin: 15px 0;
}
.wrapper {
	width: 600px;
	border: 2px solid #ccc;
}

span {
	color: red;
}

span.outer {
	padding: 5px;
	border: 4px solid #cc0;
	margin: 5px;
}

span.inner {
	padding: 5px;
	border: 2px solid #00c;
	margin: 5px;
	/*display: inline-block;*/
}

.box {
  float: left;
  margin-right: 15px;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}