How do I get text to appear below the images in HTML?

I have two images which I have placed side by side on a page (refer to screenshot). I placed the images using a CMS editor (Movable Type). I wanted to place some text below the images, but the text ended up appearing to the right of the images. I had to press a few hard returns to force the text to appear below the images. Here is some of the code for it:
<form mt:asset-id="10487" class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="adlerbombgrovesandoppenheimer.jpg" src="" width="205" height="279" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></form></div><div><p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p><p><a href="" target="_blank">Week 1 Handout</a>...</div>

There must be a more elegant way to do this. I would appreciate any suggestions.

Thank you.
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

If I have side by side pictures and want text underneath, I usually make a table of 3 columns and 2 rows. Set it for no borders.

The centre column just serves as a spacer between the two pictures. Set the cells to centre vertically and horizontally and put the text in the second row. See for instance the first two photos here:

The code is:

<table width="805" height="384" border="0" align="center" cellpadding="0" cellspacing="0" >
    <td width="42" height="346">&nbsp;</td>
    <td width="392" background="Clinic One Graphics/Bridge.jpg">&nbsp;</td>
    <td width="22">&nbsp;</td>
    <td width="332" background="Clinic One Graphics/Sparrow.jpg">&nbsp;</td>
    <td width="17">&nbsp;</td>
    <td height="38" colspan="2" valign="top"><div align="center">
        <p>Landscapes require a large depth of field to make everything in the image sharp.</p>
    <td colspan="2" valign="top"><div align="center">
        <p>Bird images require a short depth of field to blur the background.</p>
Russ SuterSenior Software DeveloperCommented:
add style="clear: both;" to the div containing your text. This will clear out any float directives in previous divs. That should move your div to the next line.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
The HTML5 way of doing it is with <figure> and <figcaption> with a bit of styling to make them inline
Not sure if your CMS editor allows this but you can try
    <figure style="display: inline-block">
      <img src="images/foreground1.png" />
      <figcaption>The first Image</figcaption>
    <figure style="display: inline-block">
      <img src="images/foreground2.png" />
      <figcaption>The second Image</figcaption>

Open in new window

Sample here
geeta_m9Author Commented:
Russ, your solution worked like a charm. Thank you, and thank you to everyone else for your solutions.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.