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

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 {
        fl开发者_JS百科oat: 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?

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.

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>

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/

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'.

You can do it with some JavaScript:

document.getElementById('content').style.width = (
    document.getElementById('wrapper').offsetWidth -
    document.getElementById('logoimg').offsetWidth - 10
) + "px";

#logoimg { float: left; }
#content { float: left; padding-left: 5px; margin:0; }
.clearer { clear: both; }

<div id="wrapper">
<img id="logoimg" src="http://i.creativecommons.org/l/by/3.0/88x31.png" />
    <div id="content">A Fehér Kéményseprőket is bevonta a Fidesz a bajban lévő hitelesek megsegítéséről szóló törvényjavaslat kidolgozásába. A Rogán Antal és Kósa Lajos által bejelentett törvénycsomagról konkrétumokat továbbra sem tudni, a politikusok az egyeztetések lezártával ígérik nyilvánosságra hozni az összefésült javaslatokat. A tárgyalásba bevont, magát civil egyesületként definiáló Fehér Kéményseprők szervezet a radikális jobb- és baloldalon is igen népszerű, rendezvényein az Antifasiszta Liga és a kommunisták mellett gárdisták is felbukkannak. A Fidesz szerint a kéményseprők jól ismerik az érintettek problémáit. Az asztalnál ülő egy másik szervezet annyira jól ismeri a problémákat, hogy megoldásként javasolja: az elmúlt években elszenvedett árfolyamveszteséget a bankok "adják vissza" a hiteleseknek.</div>
    <div class="clearer"></div>
</div>