2-column CSS responsive layout with responsive image

Question

I looked through so 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 one column when resizing using an image with automatic resizing?

Using max-width 100% on img will make the image sensitive and automatically resize. However, automatic resizing does not work in the table or with the percentage or float applied to the div around it. That way, any CSS 2 column layout that contains either a float or a percentage of the image will defeat image resizing.

Besides using a grid, does anyone have a solution for this?

Answer 1

If you float the parent div of the image, it should not affect the sensitive 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