How to move text down and place a caption below a picture - html

Question

I'm trying to figure out how to both place a caption beneath a picture and move text down. I'm trying to move the text that contains the second unorganized list down.
The figcaption with the text "Crazy Baby" appears on the top right of the picture it's supposed to be under. My understanding was figcaption would accomplish that although I'm clearly doing something wrong.
<div class="container">
<div class="jumbotron">
<div class="text-center">
<h1>The Golden Babies of 3 Orchard Lane</h1>
<p style="font-size: 30px;"><em>The Snady and Baby Maya</em></p>
<img src="http://oi63.tinypic.com/2ijkend.jpg" alt=" haha, sucks" class="Sandy">
<figcaption> <em>Snady Babushka</figcaption> </em>
<font size="5">
<ul>
<strong> Sandy loved</strong>
<li>Her red ball</li>
<li>Hiding in her jungle</li>
<li> Crossing her paws in an X</li>
<li> And most of all her big brother, Jonah </li>
</ul>
</font>
<br>
</div>
<img src="http://oi68.tinypic.com/8yb2f4.jpg" align="left" alt="I'm so sorry you can't see my baby face" class="Maya">
<figcaption><em>Crazy Baby</figcaption></em>
<font size="5">
<ul id="cap">
<div class="text-center">
<strong>Maya Loves</strong>
<li>Tennis balls</li>
<li>People more than dogs</li>
<li>Greeting someone as they enter the house</li>
<li> And of course, her big brother, Jonah</li>
</ul>
</div>
</font>
</div>
</div>

Answer 1

Without seeing your CSS, this is what I'd recommend trying. First thing I would do it make sure you tags are placed in the correct order. In your unordered list, you have the div starting inside the tag, but ending outside of it.
<ul id="cap">
<div class="text-center">
<strong>Maya Loves</strong>
<li>Tennis balls</li>
<li>People more than dogs</li>
<li>Greeting someone as they enter the house</li>
<li> And of course, her big brother, Jonah</li>
</ul>
</div>
Should look like this
<div class="text-center">
<ul id="cap">
<strong>Maya Loves</strong>
<li>Tennis balls</li>
<li>People more than dogs</li>
<li>Greeting someone as they enter the house</li>
<li> And of course, her big brother, Jonah</li>
</ul>
</div>
Then what you can do it with that div, give it a certain width, say the width of the image. Then float both the image and the list, left.
.text-center {
width: 100px; (Just an example)
}
.text-center img,
.text-center ul {
float: left;
}