Float image, push text below...

[buildakicker]

Hello,

I use the float: option in css on images a lot. It's nice. When I don't have enough text to fill to the next line I have to use <br /> to bring the next line down far enough to escape wrapping around the image. Here is an example:

<h5>Accessible Recreation Opportunities</h5>
        <p><img src="images.jpg" alt="[Image] Accessible Fishing Platform" width="99" height="105" align="right" class="floatLeft"/>National Forest offers a number of recreation facilities 
          designed with <a href="recreation/accessible/">accessibility</a> in mind for persons with disabilities. 
          Accessible fishing piers, paved trails, specially designed campsites, 
          and accessible picnic tables are all available.</p>
        <h5>Camping</h5>
        <p><img src="image.gif" alt="National Forest" width="75" height="75" class="floatLeft" />Sites at almost all forest campgrounds are
          available on a first-come-first-served  basis,
          but there are some sites that can be reserved
          ahead of your arrival. </p>

The text in the first <p> is not long enough to "fill" down far enough to push the next <h5> down, so the <h5> comes up and wraps the image also, but I would like to have the <h5> always be a new line BELOW whatever image is there reguardless of the amount of text or size of picture.

Any how to's?

Thanks

[markbrown4]

Hello,

Because your images are not part of the paragraph they should be outside the paragraphs.

<h5>Accessible Recreation Opportunities</h5>
<img src="images.jpg" alt="[Image] Accessible Fishing Platform" width="99" height="105" align="right" class="floatLeft"/>
<p>National Forest offers a number of recreation facilities 
designed with <a href="recreation/accessible/">accessibility</a> in mind for persons with disabilities. Accessible fishing piers, paved trails, specially designed campsites, and accessible picnic tables are all available.</p>
<h5>Camping</h5>
<img src="image.gif" alt="National Forest" width="75" height="75" class="floatLeft" />
<p>Sites at almost all forest campgrounds are available on a first-come-first-served  basis, but there are some sites that can be reserved ahead of your arrival. </p>

Not too sure about the question sorry, Any block level element will force a line break after it

[markbrown4]

Ahh, I see it now.. You want to clear your headings, add clear: left;