Can someone tell me how to keep/force the image below inside the outside <div> tag?

The image below fits inside the 50% width outside <div> tag when the browser is wide enough.

However, when I make the browser window narrow the outside <div> tag gets narrow - but the image stays the same width. It juts outside of the right border of the outside <div> tag.

The image is 350px wide. I have tried using width: 400px and min-width: 400px for the inside <div> tag. Setting the width for the inside <div> tag at 400px works in the FireFox browser. But that methodology won't work with the Internet Explorer browser.

PHP Code:

// outside div tag.
<div style="width: 50%; border: 2px solid">
// this image juts outside when browser is made narrow
<div><img src="sample.png" /></div>
What I need is for the outside div tag to get narrow to the width of the image then become fixed at that point so that it still surrounds the entire image.