Question

I am trying to add and image and then put some text(title) on the right side on that image and the place and ul underneath this title. But the problem is when I use float left to img, the text appears to the right of the image but also it appears at the bottom of the image. I want to make text and ul display to the right side and also at the same time at the top of the image.

currently it appears like in image below

<img src="images/image1.png" width="48" height="48" class="intro" />
<p class="title">
    Inter
</p>
<p>
<ul>
<li>One statement</li>
<li>One statement</li>
<li>One statement</li>
</ul>
</p>

<img src="images/image1.png" width="48" height="48" class="intro" />
<p class="title">
    Inter
</p>
<p>
<ul>
<li>One statement</li>
<li>One statement</li>
<li>One statement</li>
</ul>
</p>

<img src="images/image1.png" width="48" height="48" class="intro" />
<p class="title">
    Inter
</p>
<p>
<ul>
<li>One statement</li>
<li>One statement</li>
<li>One statement</li>
</ul>
</p>

.intro {
    float: left;
}

Answer 1

Use display display: inline-block; at p and li or use

<div class="edit">
    <img src="images/image1.png" width="48" height="48" class="intro" />
    <p class="title">
        Inter
    </p>
    <p>
    <ul>
    <li>One statement</li>
    <li>One statement</li>
    <li>One statement</li>
    </ul>
    </p>
   </div>

CSS:

.div{
 float:left;
 width:400px or 100%;
 }
 img
{
  width:50%
}

Just approach like this or use display:inline-block;