This HTML:
<figure style="display: table; float: right; margin-left: 1.5rem; margin-bottom: 1.5rem; margin-top: 0; margin-right: 0">
<img src="https://picsum.photos/4000/2000" width="4000" height="2000" style="width: 400px; height: auto">
<figcaption style="caption-side: bottom; display: table-caption">I know, I just call her Annabelle cause she's shaped like a… she's the belle of the ball! She wanted to look 48. I nearly airbrushed her into oblivion.</figcaption>
</figure>
<p>Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu. Do not order the Skip's Scramble. You might enjoy this. Oh. Em. Gee. That's amazing. It feels good to be back in a queen! I need a tea to give my dingle less tingle. Teamocil. Heyyyyyy Uncle Father Oscar. Let's see some bananas and nuts! So Ann, the question is, do you want a man or a boy? I know how I would answer. Never once touched my per diem. I'd go to Craft Service, get some raw veggies, bacon, Cup-A-Soup…baby, I got a stew goin'. You might enjoy this. Oh. Em. Gee. That's amazing. I've always been deeply passionate about nature. Perhaps you remember Neuterfest? I'll never forget your wedding. But I did finally get into Dad's pants. Although I had to have the crotch taken in a little bit. She's a girl, I need to teach her how to be a woman. Within her lies a queen. Let me out that queen.</p>
It renders correctly:
However, if you change the style width to 25% like this:
<img src="https://picsum.photos/4000/2000" width="4000" height="2000" style="width: 25%; height: auto">
It renders incorrectly:
The floated figure no longer appears to the right of the paragraph text. Instead, it appears above the paragraph text.
My questions are:
- Why does it do this?
- Is there a way to make any style width unit and value work while getting the same layout/render?
JSFiddle: https://jsfiddle.net/jbx3htfs/
CodePudding user response：
The issue is caused because you apply the 15% at the wrong spot. If you use 25% on the image then the image will fill 25% of the parent's width (figure). You have to apply the width to the figure element and then give the image a width of 100%:
<figure style="display: table; float: right; margin-left: 1.5rem; margin-bottom: 1.5rem; margin-top: 0; margin-right: 0; width: 25%">
<img src="https://picsum.photos/4000/2000" width="4000" height="2000" style="width: 100%; height: auto">
<figcaption style="caption-side: bottom; display: table-caption">I know, I just call her Annabelle cause she's shaped like a… she's the belle of the ball! She wanted to look 48. I nearly airbrushed her into oblivion.</figcaption>
</figure>
<p>Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu. Do not order the Skip's Scramble. You might enjoy this. Oh. Em. Gee. That's amazing. It feels good to be back in a queen! I need a tea to give my dingle less tingle. Teamocil. Heyyyyyy Uncle Father Oscar. Let's see some bananas and nuts! So Ann, the question is, do you want a man or a boy? I know how I would answer. Never once touched my per diem. I'd go to Craft Service, get some raw veggies, bacon, Cup-A-Soup…baby, I got a stew goin'. You might enjoy this. Oh. Em. Gee. That's amazing. I've always been deeply passionate about nature. Perhaps you remember Neuterfest? I'll never forget your wedding. But I did finally get into Dad's pants. Although I had to have the crotch taken in a little bit. She's a girl, I need to teach her how to be a woman. Within her lies a queen. Let me out that queen.</p>CodePudding user response：
<figure style="display: table; float: right; margin-left: 1.5rem; margin-bottom: 1.5rem; width: 50%">
<img src="https://picsum.photos/4000/2000" width="4000" height="2000" style="width: 90%; height: auto;">
<figcaption style="caption-side: bottom; display: table-caption;">I know, I just call her Annabelle cause she's shaped like a… she's the belle of the ball! She wanted to look 48. I nearly airbrushed her into oblivion.</figcaption>
</figure>
<p >Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu. Do not order the Skip's Scramble. You might enjoy this. Oh. Em. Gee. That's amazing. It feels good to be back in a queen! I need a tea to give my dingle less tingle. Teamocil. Heyyyyyy Uncle Father Oscar. Let's see some bananas and nuts! So Ann, the question is, do you want a man or a boy? I know how I would answer. Never once touched my per diem. I'd go to Craft Service, get some raw veggies, bacon, Cup-A-Soup…baby, I got a stew goin'. You might enjoy this. Oh. Em. Gee. That's amazing. I've always been deeply passionate about nature. Perhaps you remember Neuterfest? I'll never forget your wedding. But I did finally get into Dad's pants. Although I had to have the crotch taken in a little bit. She's a girl, I need to teach her how to be a woman. Within her lies a queen. Let me out that queen.</p>Because figure occupies all 100% of present width before <p> gets to do so.
So you need to be precise with figure's width and declare it as well like here: https://jsfiddle.net/6o51tzqn/