How to position two elements inline even when the window is resized ?

Question

I'd like this two elements :

http://gyazo.com/44b1b0417d74b05287fe774a4d482bf0

to be in one row all the time, no matter if the window is horizontally resized. Because now they breaks into two rows like on this screen :

http://gyazo.com/1820dc436dba2e827b330039109dc0ee

I tried float one element left and other right but it doesnt work.

Please can you give me a hints how to do this ? Thanks!

Answer 1

The trick is to use max-width:100%; and height:auto on the img tag

JSFiddle Demo

HTML

<div class="wrapper">
    <div class="left">
        <img src="http://placehold.it/600x600" alt="">
    </div>
    <div class="right">
        <img src="http://placehold.it/600x600" alt="">
    </div>
    <div class="clr"></div>
</div>

CSS

.wrapper {
    width:50%;
    margin:0 auto;
    border:1px solid red;
}
.left {
    width:50%;
    float:left;
}
.right {
    width:50%;
    float:right;
}
.clr {
    clear:both;
}
img {
    max-width:100%;
    height:auto;
}