___ ___ erkimt Align text after image ______ qstntxt ___

Hello, I have a problem that I do not know how to solve. This is my situation:

ButIwantittolookthisway:

And like I said, I have no idea how to solve it.

And this is my code:

%pre%

Thank you.

    

______ azszpr30062 ___

While you treat the text as a single character string, no space. Of course your code will not partition the content and will not consecutively fit the base of a %code% . I imagine, you will not have a single giant word like that.

Instead of dealing with style, I applied classes. Some sincerely even unnecessary, there is how to lapid this code a bit. The value of the body can be modified according to the proportions it will treat.

CSS

%pre%

HTML

%pre%

JSFiddle

    

______ azszpr30058 ___

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

%pre%

JSFiddle

Or better yet, delete inline styles and just use classes, it's much easier to modify and adjust later.

    

______ azszpr30066 ___

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

%pre%

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

    

______ azszpr170973 ___

%code% in the image. simple and easy:)

    

___

While you treat the text as a single character string, no space. Of course your code will not partition the content and will not consecutively fit the base of a width . I imagine, you will not have a single giant word like that.

Instead of dealing with style, I applied classes. Some sincerely even unnecessary, there is how to lapid this code a bit. The value of the body can be modified according to the proportions it will treat.

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><divclass="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

I've pasted your HTML into jsfiddle and left working as you wanted it to, but I noticed that it's a little complicated 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, delete inline styles and just use classes, it's much easier to modify and adjust later.

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

.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 can not exceed 100%. The width has to be even defined because by default the value of the width of the image and of the p is of 100% it makes the text stay under the image.

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