2

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>
P.S.
  • 15,970
  • 14
  • 62
  • 86
Dave
  • 759
  • 2
  • 9
  • 31

3 Answers3

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>
kzhao14
  • 2,470
  • 14
  • 21
  • why display:inline-block works, but display:block not working? Thanks – Dave Nov 17 '16 at 00:09
  • `display: inline-block` is different from `display: block`. `inline-block` says to the browser that you want the element in the same line as the previous element. `block` just says that you want it to be displayed. https://developer.mozilla.org/en-US/docs/Web/CSS/display – kzhao14 Nov 17 '16 at 00:11
0

First thing you should do is remove the align="left" attribute from your img element as all elements are left aligned by default and the align attribute is typically only reserved for the table element by default. The img and div elements have the display: block; attribute by default. There are two decent solutions for your problem.

1. Float the two elements and don't forget to clear your floats. You should also get in the habit of indenting properly so you can see the parent child relationship in your HTML structure.

HTML

    <div class="container">
      <img src="#">
      <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>
    </div>

CSS

    img,
    div {
        float: left;
    }

    .container {
        overflow: hidden;
    }

2. Set both elements to be inline-block elements.

CSS

    img,
    div { 
        display: inline-block;
    }
greatgumz
  • 408
  • 3
  • 17
0

In your particular case:

ul {
  clear: left;
}

(if you want the ul below the image)

http://codepen.io/anon/pen/xRENMB

(But you should use a class for the ul and the rule, so that other uls won't be affected)

Johannes
  • 64,305
  • 18
  • 73
  • 130