Shrink-to-fit width

by kmouse

HTML

<p>The following boxes should all appear the same, with the background and border tightly packed around the words 'A BOX'.</p>
<div>
	<span>A BOX</span>
</div>
<div>
	<div class="absolute">A BOX</div>
</div>
<div>
	<div class="float">A BOX</div>
</div>
<div>
	<span class="float">A BOX</span>
</div>
<div>
	<div class="iblock">A BOX</div>
</div>
<div>
	<div class="iblock right">A BOX</div>
</div>

CSS

body {
	background: #ddd;
	color: #444;
}
body > div {
	clear: both;
	position: relative;
	height: 50px;
}
body > div > * {
	border: 2px solid #888;
	color: black;
	background: #ccf;
}
.absolute {
	position: absolute;
}
.float {
	float: left;
}
.iblock {
	display: inline-block;
}
.right {
	text-align: right;
}