Placing text under image that is floating left

Question

I have successfully placed an image on the left like so:

<div class="Carl1">
<a href="https://rads.stackoverflow.com/amzn/click/com/1940412145" rel="nofollow noreferrer" target="_blank"><img class="image-left" src="http://caribeauchamp.com/wp-content/uploads/2015/04/first-time-final-cover.jpg" alt="My First Time in Hollywood" />
<span><strong>Amazon</strong></span>
</a>
</div>

And CSS:

.Carl1 {
text-align: left;
}
.image-left {
    float: left;
    margin: 15px 20px 10px 0px;
    border: solid 4px #fff;

}

However my text appears on the upper right of the image when I want it to appear under the image. What am I doing wrong?

Answer 1

Float needs to be cleared. Also you used span element, what is inline element by the default, you will need to set span element as block element.

Here is a JSfiddle link.

DEMO

HTML:

<div class="Carl1">
<a href="http://rads.stackoverflow.com/amzn/click/1940412145" target="_blank">
    <img width="100" class="image-left" src="http://caribeauchamp.com/wp-content/uploads/2015/04/first-time-final-cover.jpg" alt="My First Time in Hollywood" />

<span class="title"><strong>Amazon</strong></span>
</a>
</div>

CSS:

.Carl1 {
text-align: left;
}
.image-left {
    float: left;
    margin: 15px 20px 10px 0px;
    border: solid 4px #fff;
}

.title {
    clear: left;
    display:block;
}

Answer 2

The float needs to be cleared otherwise the text will attempt to Wrap around the image

.Carl1 span{display:block;clear:both;}