9

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?

Charles
  • 119
  • 1
  • 3
  • 7

1 Answers1

28

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

3dgoo
  • 15,716
  • 6
  • 46
  • 58
  • That's great, thanks. Except to add left and right margins I had to change the widths to 45% for left and right. – Charles Jan 23 '14 at 20:45
  • Hi @TomSawyer, this will work on any browser that supports media queries. The example media query above will be triggered when the viewport width is 480px or less. The test you tried, was the viewport width less than 481px? Does that version of IE support media queries? From a quick search I found [some versions of IE on Windows Phone have had bugs that cause the browser to ignore media queries](http://stackoverflow.com/questions/20181819/ie-10-on-wp8-ignores-media-queries). – 3dgoo May 12 '15 at 08:34