Just float the image, and the text will align to the right.

    .wrapper img {
        float:left;
    }

The [fiddle][1].


  [1]: http://jsfiddle.net/mathieujonson/LgJ4w/15/

I know this question has been asked before ([1][1], [2][2], [3][3], [4][4], [5][5], [6][6]), but none of these solutions seem to be working for me.

**HTML**



    <div class="wrapper">
        <img src="http://imgur.com/5dEdRvCs.png" />
        <div>
            Lorem ipsum dolor sit amet, consectetur fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>

**CSS**



    .wrapper > *{
        float: left;
    }

[jsFiddle][fiddle]
====

------

I'd like both the `img` and the `div` under the wrapper to `float` `left`, and for the div with all the text to take up all the remaining space on the page, like this: 

![demo-good][demo-good]

Instead it looks like this:

![demo-bad][demo-bad]

-----

I've tried adding `overflow: hidden` to the wrapper, tried a number of `width` and `min-width` settings, but to no avail.

There must be some relatively simple way in CSS to accomplish this.




[1]: https://stackoverflow.com/q/10298520/1366033
[2]: https://stackoverflow.com/q/266015/1366033
[3]: https://stackoverflow.com/q/10248306/1366033
[4]: https://stackoverflow.com/q/9492542/1366033
[5]: https://stackoverflow.com/q/9672176/1366033
[6]: https://stackoverflow.com/q/10891293/1366033
[demo-good]: http://i.imgur.com/J50rQCZ.png
[demo-bad]: http://i.imgur.com/CCHgAzl.png

[fiddle]: http://jsfiddle.net/KyleMit/LgJ4w/