Grow your CSS skills. Land your dream job.

How to make a floated image act responsively?

  • # January 1, 2013 at 8:35 pm


    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

    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

    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.

*May or may not contain any actual "CSS" or "Tricks".