How to float paragraph next to image without wrapp

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

The only way I know to do it without JavaScript is to wrap your two elements in a container element whose 'overflow' property is set to 'auto', float the image, and set the 'overflow' of the paragraph to 'auto', as well.

See it working here: http://jsfiddle.net/leegee/vpjjB/

You could also set a percentage-width on the paragraphs and float them to the opposite side as the image, but I am not sure that is a good answer to your question.

By the way, as you are rendering paragraphs and images, I changed the mark-up to use the relevant 'semantic' elements of old-fashioned 'p' and 'img'.

Answer 2

You can do it with some js: http://jsfiddle.net/vXMkR/ .

Answer 3

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 4

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>

Answer 5

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.