Background
We
- enclose content within div containers called Blocks, and
- visually indicate where Blocks start by applying the CSS attribute border-top solid.

Sample HTML
<div class="fact">
<h6>My Block label</h6>
<p>Some text...</p>
<img>My floating image 1, aligned to the right. </img>
</div>
<div class="process">
<h6>My Block label</h6>
<p>Some text...</p>
<img>My floating image 2, aligned to the right. </img>
</div>

The Problem
If there is little text in the Block and the image is large, the image will bleed into the second block. How can we adjust the size of the Block to accommodate the image height?

You could use the "clear" property on the following block to push it down below any floating images, or you could use "overflow: hidden" for the block, which should have the side-effect of extending the block height to fit any descendant floats.

Perfecto!
overflow: hidden works like a charm.