All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

How to make a floated image act responsively?

  • # January 1, 2013 at 8:35 pm



    responsive images

    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?

    # January 1, 2013 at 8:52 pm

    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 :)

    # January 1, 2013 at 8:52 pm

    Edit : ^^ what he said. ^^

    # January 1, 2013 at 9:05 pm

    This reply has been reported for inappropriate content.

    Beat me too it. :P Done practically the same thing, except using columns. Basically by using percentages, when the browser beings to re size, it will respond to that exact percentage by the width of the browser at the time. @David_Leitch ‘s response is much better, as he uses a media query to proportionally scale everything neatly :)

    Pen Link

    # January 1, 2013 at 9:27 pm

    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! :)

    # January 1, 2013 at 9:32 pm

    This reply has been reported for inappropriate content.

    I know it’s out of scope, and you want to learn which is good, but look at the thread too. You’ll learn a lot from the frameworks provided in there if you look them up. All are responsive so it’s a good learning curve if you want to practice your own responsive code! Which is the best Boilerplate?

    Happy New Year buddy!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed