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

HTML

<!-- language: lang-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

<!-- language: lang-css -->

.wrapper > *{
    float: left;
}

jsFiddle

---

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:

Instead it looks like this:

---

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.

Just float the image, and the text will align to the right.

.wrapper img {
    float:left;
}

The fiddle.