CODEWITHSUNDEEP
htmlcss
Carl
Carl

Reputation: 5779

Placing text under image that is floating left

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?

Upvotes: 5

Views: 13300

Answers (3)

Wlada
Wlada

Reputation: 1102

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;
}

Upvotes: 9

Alan H.
Alan H.

Reputation: 16568

Your question indicates you haven't quite figured out how floats work. The answers here will solve your problem today, but I suggest learning more about CSS positioning.

Here is a really great and classic tutorial on the subject. It’s old, but it’s good stuff. You will have a lot easier time with CSS afterwards, I promise.

Also, I’d specifically suggest that you don’t float this image by itself; instead, float the the whole container (.Carl1) and give it a width.

Compared to the other answers on this page, this solution is closer to expressing your intention in code. I assume you consider the whole Carl1 div to be essentially one object whose contents should appear together. Floating them as one is true to this intention :)

Upvotes: 3

sjm
sjm

Reputation: 5468

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

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

Upvotes: 3

Related Questions