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

Question

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

You can do this without JS. See my fiddle http://jsfiddle.net/VaSn6/5/

Put the image and paragraph side-by-side:

<img />
<p>text</p>

With CSS:

img {
    float: left;
    margin-right: 10px;
    clear:both;
}
p {
    margin-left: 0px;
    overflow:auto;
    display:block;

}

My jsfiddle extends the example to clearing paragraphs and right-aligned images.

I needed something like this that was CMS-friendly and marketing-team friendly (marketers are scared of divs!)

This works down to at least IE8.

If you need vertically-centered images next to text, you'll need some divs: http://jsfiddle.net/VaSn6/12/ This will only vertically center longer text than images.

Or if you're ok with CSS tables, I'd go with http://jsfiddle.net/sY4H8/1/ (also ok down to IE8). That works even if the text is less tall than the image.

Answer 2

Here is some simple CSS for doing this job.

img {
    float: left;
    border: 1px solid black;
    margin: 5px 10px 10px 0px;
}

<p>
    <img src="http://scalabilitysolved.com/content/images/2014/May/stackoverflow.png" width="100" height="140">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit, aspernatur aliquid ea, vel distinctio cupiditate reprehenderit! Laborum amet, accusantium nesciunt repudiandae, ad illo dignissimos maiores, dolorum est aliquam eveniet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit, aspernatur aliquid ea, vel distinctio cupiditate reprehenderit! Laborum amet, accusantium nesciunt repudiandae, ad illo dignissimos maiores, dolorum est aliquam eveniet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit, aspernatur aliquid ea, vel distinctio cupiditate reprehenderit! Laborum amet, accusantium nesciunt repudiandae, ad illo dignissimos maiores, dolorum est aliquam eveniet.
</p>