CODEWITHSUNDEEP
htmlcssimagehtml-listsleftalign
Dave
Dave

Reputation: 769

left align images breaks ul block

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>

Upvotes: 2

Views: 1779

Answers (3)

Johannes
Johannes

Reputation: 67778

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)

Upvotes: 0

greatgumz
greatgumz

Reputation: 418

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;
    }

Upvotes: 0

kzhao14
kzhao14

Reputation: 2640

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>

Upvotes: 1

Related Questions