Line box and floats

by kmouse

HTML

<div class="big right"> Big </div>
<div class="lines">
	First line<br/>
	Second line ABC DEF
	 <div class="small right">X</div><div class="small right">Y</div> 
	 GHI JKL MNO PQRS TUV
</div>

<hr/>
<div class="big right"> Big </div>
<div class="lines">
	First line<br/>
	Second line
	<div class="small left">X</div><div class="small left" style="clear:left;">Y</div><div class="small right">Z</div>
	 ABC DEF  GHI JKL MNO PQRS TUV
</div>

<hr/>
<div class="big right" style="height: 140px"> Big </div>
<div class="lines">
	First line<br/>
	Second line ABC DEF GHI JKL MNO PQRS TUV<div class="small right">X</div><div class="small right">Y</div><div class="small left">Z</div>
	ABC DEF GHI JKL MNO PQRS TUV ABC DEF GHI JKL MNO PQRS TUV  ABC DEF GHI JKL MNO PQRS TUV <div class="inline tall">Z</div> 
</div>

CSS

body {
	width: 500px;
	background: #ddd;
}
hr { clear: both; margin: 1em 0; }
div {
	border: 2px solid #666;
	
}

.right { float: right; }
.left { float: left; }
.clear { clear: both; }


.lines { line-height: 50px; background: #cca; }

.big { width: 300px; height: 190px; background: #ada; }
.small { width: 30px; height: 15px; background: #eaa; line-height: 15px; }
.tall { width: 30px; height: 100px; background: #aae; }

.inline { display: inline-block; overflow: hidden; }