propper adjustment of text and list floating around figure/image # flexbox vs float or other methodes

Question

based on this question: Image get misaligned in markdown when using align right or left

---

First try with float - sub optimal positioning of bullet points

img {
  float: left;
  margin-left: -52px;
  margin-right: 18px;
}

<h2>Float text around an image with text/list</h2>
<p>How to properly solve this with float or flexbox or any other modern method</p>

<p>In this example.</p>
<figure>
<img src="https://randomuser.me/api/portraits/women/51.jpg" alt="img" style="width:170px;height:170px;margin-right:15px;">
<figcaption>Caption Image</figcaption>
</figure>
<p></p>

<p>Head:</p>

<ul>
  <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum inte </li>
  <li>rdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
    convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
    congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</li>
</ul>

<p>The following text/list alignment would be expected to get (right to the image)</p>
<p>Topic :</p>

<ul>
  <li> correct bullet points / list alignment </li>

</ul>

---

Second try with flex

figure {
display: flex;
margin-left: -32px;
margin-right: 18px;
}

figcaption {
  padding: 15px;
}

.persOpties {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}

<div class="persOpties">
<h2>Float text around an image with text/list</h2>
<p>How to properly solve this with float or flexbox or any other modern method</p>

<p>In this example.</p>
<figure>
<img src="https://randomuser.me/api/portraits/women/51.jpg" alt="img" style="width:170px;height:170px;margin-right:15px;">
<figcaption>Caption Image</figcaption>
</figure>
<p></p>

<p>Head:</p>

<ul>
  <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum inte </li>
  <li>rdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
    convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
    congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</li>
</ul>

  </div>

---

How to adjust the text and the list to the right of the image with a proper space to the image

with float

• the line bullets are directly at the image - should be like that
• the bullet points would be under aligned with the text, not left to "Head:"

How to get text and list floating around the figure/image with flex/flexbox?

Answer 1

You want the bullet points to align with the text above.

list-style-position determines whether they are outside or not. In this case you want them inside.

img {
  float: left;
  margin-left: -52px;
  margin-right: 18px;
}

li {
   list-style-position: inside;
}

<h2>Float text around an image with text/list</h2>
<p>How to properly solve this with float or flexbox or any other modern method</p>

<p>In this example.</p>
<figure>
<img src="https://randomuser.me/api/portraits/women/51.jpg" alt="img" style="width:170px;height:170px;margin-right:15px;">
<figcaption>Caption Image</figcaption>
</figure>
<p></p>

<p>Head:</p>

<p><ul>
  <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum inte </li>
  <li>rdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
    convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
    congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</li>
</ul>
</p>

<p>The following text/list alignment would be expected to get (right to the image)</p>
<p>Topic :</p>

<ul>
  <li> correct bullet points / list alignment </li>

</ul>