fitting content into a div without it dropping down - html

Question

I have created a demo of my issue, I am trying to force text next to an image but when you shrink the browser window is knocks it down to underneath the image.
Jsfiddle
I need a better approach to this.
.avatar_ad_bg_desktop{
width: 100px;
height: 100px;
background-image: url('http://blogs.terrapinn.com/total-real-estate/files/2012/04/SAV_CMYK_LogocopyEng.jpg');
background-repeat: no-repeat;
background-size:cover;
float:left;
}
<div style="background: red; height: auto; overflow:auto;">
<div style="background: green;">title</div>
<div style="background: blue;">Web address</div>
<div style="float:left;">
<div class="avatar_ad_bg_desktop">
</div>
<div style="float: left; margin: 0 0px 0 10px; vertical-align:top; word-break: break-all;">Savills plc is a global real estate services provider listed on the London Stock Exchange</div>
</div>
</div>

Answer 1

Instead of setting float:left on the div with the text, set it with overflow:auto (or hidden)
FIDDLE
Now resize the browser window and see that the text fills up the remaining width

Answer 2

You can use table and table-cell format to get better result. Update your HTML like below.
<div style="background: red; height: auto; overflow:auto;">
<div style="background: green;">title</div>
<div style="background: blue;">Web address</div>
<div style="display: table;">
<div class="avatar_ad_bg_desktop">
</div>
<div style="display: table-cell; margin: 0 0px 0 10px; vertical-align:top; word-break: break-all;">Savills plc is a global real estate services provider listed on the London Stock Exchange</div>
</div>
</div>
</div>
DEMO

Answer 3

You can use the display:table / table-line / table-cell properties of CSS and remove the float:left declarations.
You set the container with display:table;
then you can have a display:table-cell; for each cells that must stay on the same line.
Here is an updated fiddle
http://jsfiddle.net/88anzh58/4/