CSS: How to place next to each other 2 images with 50 % width?

Question

I want to place two images each of unspecified height and width 50 % of the page next to each other. They should be in the same height and they should resize as user changes width of the browser window. How can I do this in CSS without using position: fixed;or position: absolute;?

Answer 1

Just make give them width: 50% in CSS. The images are inline blocks and will be nicely next to each other, as long as you make sure there is no whitespace inbetween them:

img {
    width: 50%;
}

<img src="http://upload.wikimedia.org/wikipedia/commons/7/70/Example.png"><img src="http://upload.wikimedia.org/wikipedia/commons/7/70/Example.png">