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?
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?