left align images breaks ul block

Question

Aligning the image(400x100) left breaks the ul block: some items are on the right side of the image, some items are under the image. How to make the ul block stay together? i.e. all items are on the right side of the image. Also the image overlaps with the ul block.

<img src="url" align="left">

<div>
  <ul>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
  </ul>
</div>

Answer 1

Simply add a display: inline-block; to your <ul>. This sets the <ul> to be displayed in the same line as the image, thus keeping it together as follows:

img {
  width: 400px;
  height: 100px;
}
ul {
  display: inline-block;
}

<img src="url" align="left">

<div>
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>