CODEWITHSUNDEEP
jquerycssimagehtmlwidth
Joey O
Joey O

Reputation: 1

Wrapping text to the width of an image that isn't set

I will keep this simple. I have an image that is using the following css: .img-right { float: right; margin: 0px 0px 10px 20px; }

Then I have a caption that lives below the image which is the following css: .img-right p { margin-top: 5px; padding-top: 5px; font-size: 11px; color: #858d93; }

I want to have the width of the paragraph tag to adjust to the size of the image I am using. The image(s) vary in width that use that class, so I was told the only way to achieve this is through jQuery. Can anyone assist with making this work?

Thanks and Happy Holidays!

Upvotes: 0

Views: 158

Answers (1)

PseudoNinja
PseudoNinja

Reputation: 2856

Ok try something like this, HTML:

<div class="img-wrapper">
<img src="foo.jpg" />
<div class="caption">This is my caption</div>
</div>

CSS:

.img-wrapper{width:auto; min-width:100px; float:right; margin:0px 0px 10px 20px;}
.img-wrapper img{min-width:100px;}
.img-wrapper .caption{width:auto; min-width:100px; margin-top: 5px; padding-top: 5px; font-size: 11px; color: #858d93; }

Upvotes: 0

Related Questions