Text wrap around image with caption question Options

[michaelbr]

I have trouble to make text to wrap around an image, I did succeed to wrap the text around an image, but when I tried to put a caption to the image, that's when my code got messed up, the problem I'm having are:
1) when I put the caption in, the caption stays besides the image instead of below it.
2) the caption seems to be centered to whole text instead of only to the image.
What I need to do to make the caption centered below the image AND the image + caption have text wrap around it?
ps: you should be able to see the code here, if not below is the code I'm trying to work on.

CODE

<p>texts</p>
  <div style="width:64; float:right; font-size:80%; border:5; text-align:center;">
    <img src="http://dummyimage.com/64x64/0088cc/ffffff.gif&text=.img" alt="alternate text" width="64" style="padding-bottom:1em;">This is my caption
  </div>
<p>more texts</p>

[pandy]

Looks like it wraps to me. But it's hard for three words to wrap around the DIV. I suppose the real text will be a little longer? Try with more text. If that doesn't look like you want, I'm afraid you need to explain a little more what's wrong.

[michaelbr]

Looks like it wraps to me. But it's hard for three words to wrap around the DIV. I suppose the real text will be a little longer? Try with more text. If that doesn't look like you want, I'm afraid you need to explain a little more what's wrong.

Sorry, I didn't post the text, it'll be too crowded, here's a sample with dummy text

CODE

<p>class="right" dolor id nibh ultricies vehicula ut id elit. Donec id elit non
    mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
    vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies
    vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
    dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id
    elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
    vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed
    consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus,
    porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.</p>

  <div style="width:64; float:right; font-size:80%; border:5; text-align:center;">
    <img src="http://dummyimage.com/64x64/0088cc/ffffff.gif&text=.img" alt="alternate text" width="64" style="padding-bottom:1em;">This is my caption
  </div>
  <img class="right" src="http://dummyimage.com/64x64/0088cc/ffffff.gif&text=.img">

<p>class="right" dolor id nibh ultricies vehicula ut id elit. Donec id elit non
    mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
    vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies
    vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
    dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id
    elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
    vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed
    consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus,
    porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.</p>

The first image is the one I'm having problem, the second is what I'd like to accomplish. Attached is the screenshot of the result of the above code.

[pandy]

That makes no sense. In the HTML/CSS you posted the second image isn't floated. In the screen cap it looks like it is. The screen cap doesn't look anywhere near what I see in a browser with your HTML and CSS (I mended the broken P tags).



Please post the markup and CSS you really have. And what exactly is the problem? Something with the wrapping or that the image caption is sort of off?

[michaelbr]

That makes no sense. In the HTML/CSS you posted the second image isn't floated. In the screen cap it looks like it is. The screen cap doesn't look anywhere near what I see in a browser with your HTML and CSS (I mended the broken P tags).

Please post the markup and CSS you really have. And what exactly is the problem? Something with the wrapping or that the image caption is sort of off?

Here's the HTML

CODE

<div id="wrap">
    <p>class="right" dolor id nibh ultricies vehicula ut id elit. Donec id elit non
    mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
    vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies
    vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
    dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id
    elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
    vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed
    consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus,
    porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.</p>
  <div style="width:64; float:right; font-size:80%; border:5; text-align:center;">
    <img src="http://dummyimage.com/64x64/0088cc/ffffff.gif&text=.img" alt="alternate text" width="64" style="padding-bottom:1em;">This is my caption
  </div>
  <img class="right" src="http://dummyimage.com/64x64/0088cc/ffffff.gif&text=.img">

  <p>class="right" dolor id nibh ultricies vehicula ut id elit. Donec id elit non
    mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
    vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies
    vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
    dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id
    elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
    vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed
    consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus,
    porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.</p>
</div>

here's the CSS file

CODE

#wrap {
  margin: 3em 8em;
}

.left {
  float: left;
  margin-right: 1.5em;
}

.right {
  float: right;
  margin-left: 1em;
}

p {
  margin-bottom: 2.5em;
  overflow: hidden;
  /* this is what keep the <p> from wrapping */
}

p:last-child {
  overflow: visible;
  /* this is an example of the browser default */
}

The 2nd image is not floated, only the 1st one, I'm trying to make the caption work first, then try to float it.
My problem:
1) the caption for the last image I'd like it to be below the last image and not beside it (I thought the code is supposed to do just that, when I put width in <div> to 64, the same as the image.
2) I'd like to wrap texts around the image + caption

This post has been edited by michaelbr: Dec 20 2020, 01:41 PM

[pandy]

OK. First, all the start tags for P are broken.

You've written the classes and the id outside the tag.
For example here.

CODE

<p>class="right"

It should be like so.

CODE

<p class="right">

But you can remove the class="right" from the second and third paragraph. Just float the images. That should take care of the wrapping.

As for the caption, it is as it is since images are inline, text level, elements. The image lines up with the text the follows it. If you look at the below in a browser you can see how it works. Images are just like words in a line of text.

CODE

<p>
Blah blah <img src="https://htmlhelp.com/icon/check.gif"> blah blah <img src="https://htmlhelp.com/icon/check.gif"> blah blah <img src="https://htmlhelp.com/icon/check.gif"> blah blah blah.</p>

Put the text in for example a P, that is a block level element, and it will be under the image. You can remove the default margins from the P with CSS.

See https://htmlhelp.com/reference/html40/block.html and https://htmlhelp.com/reference/html40/inline.html .

[michaelbr]

Put the text in for example a P, that is a block level element, and it will be under the image. You can remove the default margins from the P with CSS.

See https://htmlhelp.com/reference/html40/block.html and https://htmlhelp.com/reference/html40/inline.html .

Thanks pandy for pointing out my mistakes, it's now clear.

[pandy]

Good. Does it look as you want now?

[michaelbr]

Good. Does it look as you want now?

Yes, it did, thanks again.