How to float paragraph next to image without wrapping the image?

Question

Hello!

I want to float a paragraph next to image, but without wrapping the image. Like this:

div.img {
        float: left;
        display: block;
        margin: 15px 2% 0 2%;
        width: 26%; /* I cannot use that */
}

div.info {
        float: right;
        display: block;
        margin: 15px 2% 0 2%;
        width: 66%; /* The width should be variable */
}

The problem is that I can do it if I set width to both img and info but the image is a variable width/height. It does not have specific width/height.

I am almost lost in this situation. Please suggest to me anything.I want both divs to float next to each other without wrapping .. without specifying box width.

Any solution..workaround?

Answer 1

Only float the image, not the paragraph of text:

img {
    float: left;
    margin-right: 10px;
}

p {
    font-family: Arial;
    font-size: 13px;
    line-height: 1.3em;
}

See: http://jsfiddle.net/9WMzZ/

Answer 2

<div id="test">
    <img src="img.png"/><p>The problem is that I can do it if I set width to both img and info but the image is a variable width/height. It does not have specific width/height.<br/><br/>
ariable width/height. It does not have specific width/height.<br/><br/>ariable width/height. It does not have specific width/height.<br/><br/>ariable width/height. It does not have specific width/height.<br/><br/>ariable width/height. It does not have specific width/height.<br/><br/>ariable width/height. It does not have specific width/height.<br/><br/>ariable width/height. It does not have specific width/height.<br/><br/>ariable width/height. It does not have specific width/height.<br/><br/>ariable width/height. It does not have specific width/height.<br/><br/>
I am almost lost in this situation. Please suggest to me anything.I want both divs to float next to each other without wrapping .. without specifying box width.

Any solution..workaround?</p>
   </div>

Worked for me in FF with :

#test img, #test p{float:left; display:block}

Answer 3

You will need some js to do that: http://jsfiddle.net/vXMkR/ .