Align text after image

Question

Hello, I have a problem I don’t know how to solve. This is my situation:

But I want it to stay this way:

And like I said, I have no idea how to fix.

And that’s my code:

        <div style=" position: relative; height: 300px; float: left; margin: 15px; display: inline-block" ><img class="img" src="http://img.bomnegocio.com/images/14/1430448213.jpg" style="width: 400px; height: 300px; " />
        </div>

        <div style=" height: 300px; margin: 15px; position: relative; display: block;" >

        <p style="word-wrap: break-word; " >ljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnld
        &nbsp;</p>

        </div>

Thank you.

Answer 1

While you treat the text as a single string, no space. Naturally your code will not partition the content and consecutively will not suit the basis of a width. I imagine, you won’t have a single gigantic word that way.

Instead of treating it like a style, I applied classes. Some of them are frankly unnecessary, there is a way to cut this code a little. The body value can be modified according to the proportions to be treated.

CSS

body{
    width:1024px;
}

.areaImagem{
    float:left;
    margin-top:10px;
}

.areaImagem img{
    width:400px;
}

.areaTexto p{
    float:left;
    max-width:500px;
    margin-left:10px;
}

HTML

<div class="areaImagem">
    <img class="img" src="http://img.bomnegocio.com/images/14/1430448213.jpg" />
</div>
    <div class="areaTexto">
 <p>ljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddndljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnld &nbsp;</p>
</div>

Jsfiddle

Answer 2

I pasted your HTML into jsfiddle and it came out working as you wanted it to be, but I noticed that it’s complicated a little beyond what it should be, it might be simpler, like this:

<div>
    <img class="img" src="http://img.bomnegocio.com/images/14/1430448213.jpg" style="width: 400px; height: 300px; margin: 5px; float:left; " />
    <p style="word-wrap: break-word; ">ljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnld &nbsp;</p>
</div>

Jsfiddle

Or better yet, eliminate inline Tyles and use only classes, it’s much easier to modify and adjust afterwards.

Answer 3

Here it depends a lot on the effect you want. If you want the text to wrap the image you should use the float as in the solutions that have already been presented. Now you want to make two columns, that is, keep the space under the empty image, then you can do so:

.warper{
width:100%;
}
.warper img{
display: inline-blcok;
width:40%;
margin:2%;
vertical-align:top;
}

.warper p{
display: inline-block;
width: 50%;
margin:2%;
vertical-align:top;
}

<div class='warpper>

   <img src=''>
   <p> Texto </p>

</div>

Note that the width value can be set to any value but the sum of all width and margin cannot exceed 100%. width has to be even set because by default the width value of the image and p is 100% makes the text under the image.

Answer 4

align="Right" in the image. simple and easy :)