2-column CSS responsive layout with a responsive image

Question

I've looked through as many posts on this subject that I can find, but none of them solve this puzzle. Is it possible to have a left column with text and a right column with an image that will flow into a single column when resized, with the an auto resizing image?

Using a max-width of 100% on img will make the image responsive and auto-resize. However, the auto-resize doesn't work in a table or with a percentage or a float applied to the div around it. So any CSS 2 column layout that contains either a float, or a percentage to the image will defeat the image resizing.

Other than using a grid, does anyone have a solution for this?

Answer 1

If you float the parent div of the image it shouldn't effect the responsive width of the image.

HTML

<div class="group">
    <div class="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima corporis voluptates repellat ullam labore qui voluptatum error nesciunt ratione dolorem fugiat veritatis ipsum nobis eius dicta est obcaecati ab animi illum molestias accusamus cum laboriosam magni recusandae earum unde fuga deserunt laudantium facere ducimus rerum tempora pariatur consectetur iste nulla a aut ea sit nam autem doloremque iusto exercitationem voluptatem facilis eos quasi. Mollitia sequi assumenda corrupti repellendus ex amet reprehenderit animi illum ducimus totam unde quia distinctio quam velit magnam. Voluptatibus dolores natus sint enim fugiat. Sapiente voluptates enim officiis. Iste repudiandae illo nulla sed nam a ratione iure?</p>
    </div>
    <div class="right">
        <img src="http://lorempixel.com/640/480/" alt="" />
    </div>
</div>

CSS

.left {
    float: left;
    width: 50%;
}
.right {
    float: right;
    width: 50%;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
img {
    max-width: 100%;
    height: auto;
}
@media screen and (max-width: 480px) {
    .left, 
    .right {
        float: none;
        width: auto;
    }
}

Demo