How to make a floated image act responsively?

[ajnoguerra]

This is some text this is some text this is some text

​
and the css —

body { background: #dcdcdc; }
img { max-width: 100%; height: auto; }

.container { padding: 10px 12px; }
#text{float:left; width:100px;margin-right:10px; }
.frame {
background: #fff;
padding: 6px;
box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
-moz-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
-webkit-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
}

My main concern in this fiddle is the div#text and img.frame. I’m trying to create a responsive website, but this has been my problem for so long, I can’t figure out how ‘to make the img behave beside the text and be responsive at the same time without going under the text when I try to reduce the size of the browser window. What it does is, it goes under the text before it acts responsively. Is there a workaround for this?

[David_Leitch]

Hey, I’ve worked up a quick [CodePen](http://codepen.io/David_Leitch/pen/vFgJf “http://codepen.io/David_Leitch/pen/vFgJf”) to give you some help.

In my example, I floated the image, rather than the text. Then, by giving the image a width of 60%, the image will respond to the width of the browser. I’ve also done a media query for when the container gets too small to fit the image and the text nicely side by side. Hope it helps :)

[Andy Howells]

Edit : ^^ what he said. ^^

[ajnoguerra]

I’ve been cracking my head trying to figure this out for the past weeks. Thank you for that neat code @David_Leitch. Happy New Year everyone! :)

[Author]

Posts