Inline formatting

by kmouse

HTML

<div class="wrapper">
<div class="paragraph" id="plain">In<div id="absolute"></div> 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.<br/>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, <span class="outer">leo metus <span class="inner">molestie erat</span>, eu pharetra <span class="inner">velit nunc</span> in ipsum. Donec aliquet <span class="inner">malesuada 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.<br/>Nunc nec sapien orci. Sed rhoncus et dui sed sagittis. Nullam <span class="outer">&nbsp;<span class="inner">venenatis quis</span> <span class="inner">elit vel</span> mattis</span>. In mattis erat et blandit aliquam. Aliquam erat volutpat.</div>
<hr>
<div class="paragraph inner-blocks" id="inner-blocks">In consectetur, neque dignissim tincidunt dapibus, <span class="outer">leo metus <span class="inner">molestie erat</span>, eu pharetra <span class="inner">velit nunc</span> in ipsum. Donec aliquet <span class="inner">malesuada 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.<br/>Nunc nec sapien orci. Sed rhoncus et dui sed sagittis. Nullam <span class="outer">&nbsp;<span class="inner">venenatis quis</span> <span class="inner">elit vel</span> mattis</span>. In mattis erat et blandit aliquam. Aliquam erat volutpat.</div>
<hr>
<div class="paragraph...

CSS

#absolute {
	position: absolute;
	width: 50px;
	height: 25px;
	border: 2px solid blue;
	display: inline;
}
hr {
  clear: both;
  margin: 15px;
  display: block;
}

.paragraph {
  display: flow-root;
  margin: 15px 0;
}

.wrapper {
  width: 1080px;
  border: 2px solid #ccc;
	overflow: auto;
	resize: both;
}

span {
  color: red;
}

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

span.inner {
  padding: 5px;
  border: 2px solid #00c;
  margin: 5px;
}

.inner-blocks span.inner {
  display: inline-block;
}


.inline-blocks span {
  display: inline-block;
}