Im having a problem with my css, when my paragraph is long, I want that my text continues aligned with my test that are alongside the image.

But Im not having this, Im having my text to go left when it exceeds the image height, as you see in my image.

And also, I'm having a blank space, marked by the circle in my picture below, and I'm not understand why.

![enter image description here](https://i.stack.imgur.com/I325u.png)

Do you know how can I have an effect like this my image below?

![enter image description here](https://i.stack.imgur.com/kL9DV.png)

**I forget to create a fiddle with my issue:** <http://jsfiddle.net/ejjtepfo/2/>

**My Html:**

```
<div class="modal">
    <h2>Title of news</h2>
    <span id="data">20/10/2014</span><br />
    <img class="img" src=""/>
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
    <div class="clear_p"></div>
    <div id="pdfs">
        <h3>Links</h3>
        <ul class="links">
            <li> <a href=""></a>Link 1</li>
            <li> <a href=""></a>Link 2</li>http://jsfiddle.net/#tidy
            <li> <a href=""></a>Link 3</li>
        </ul>
    </div>
</div>

```
['https://Stackoverflow.com/questions/25457631', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3026353/']
DEMO: <http://jsfiddle.net/wL6jua0L/>
-------------------------------------

Uses box-sizing:border-box, padding and negative margin. Assumes, as in the OP, that the image is fixed to 200px wide, which means with a 5px border, you add the actual width you want it since border-box includes the borders and padding. Regarding the gap below it on the other screen shot, if you change your paragraph line-height to 24px, it won't be there or you can manipulate the image height. Google vertical rhythm and images.

![enter image description here](https://i.stack.imgur.com/KfA5P.png)

```
.modal .img {
    width:210px;
    height:230px; 
    border:5px solid #f3f3f3;
    margin:18px -220px 0 0;
    box-sizing:border-box;
    float:left;
}

.modal p{
    box-sizing:border-box;
    font-size: 16px;  
    text-align:left;
    line-height:25px;   
    float:left;
    padding:0 10px 0 230px;
}

```
Add a div for your image in html file and add this in your css

```
 #image{
 width:210px;
 height:1000px;
 float:left;
 }

```