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