html - Is it possible to shrink the width (responsive) of an image beside a floated element? -

i'm trying convert existing design (somewhat) responsive layout. has floated box (blue box) in upper left corner, , rest of content should floated around (text , green box, representing image).

i'm looking way adjust size of image (green box) long beside floated blue box, returning normal size when being pushed beneath other content (lorem ipsum).

my normal approach max-width:100% won't kick in here because of blue box. have approach (fiddle, same snippet below) using wrapping div, demonstrates desired behaviour, mean wrap each content image in div.

is there other smart way without wrapping div?

/* try varying width of #wrap see effect */  #wrap {    border:1px solid #aaa;    min-height:200px;    width:280px;    background-color:#ddd;    padding:10px;  }  #blue {    width:150px;    height:100px;    border:1px solid #aaa;    float:left;    background-color:#ccccff;    overflow:hidden;    margin-right:10px;  }  #green {    min-width:100px;    min-height:30px;    background-color:#ccffcc;    border:1px solid #aaa;    overflow:hidden;    max-width:100%;  }  #green > img {    width:100%;  }

<div id="wrap">    <div id="blue"></div>    lorem ipsum dolor sit amet, consetetur sadipscing elitr.    <div id="green"><img src="http://lorempixel.com/400/200/"/></div>  </div>

here's 1 approach.

say side side layout of blue , green divs works until reduce viewport 800px. use css , media query following:

/* set default sizes #green , #blue  */   #green{  width:a; }    #blue{  width:b; }    /* on narrow viewports resize #green , #blue , stack them 1 on other  */   @media (max-width: 800px) {         #green{        clear:left:          width: c;      }        #blue{     width:d;    }   }  

hope helps!