My layout includes images - one on the left and two on the right. As I resize the browser window, the images scale accordingly.
The issue arises when viewing my layout in Chrome: the image positions shift as I resize the browser, unlike Safari and Firefox where they remain consistent.
To better illustrate the problem, here is a jsfiddle example:
Additionally, here is a snippet of the code used:
#col1{
width:50%;
float:left;
}
#col2{
width:50%;
float:left;
}
#img1{
width:50%;
float:right;
clear:both;
}
#img2{
width:50%;
float:right;
clear:both;
}
#img3{
width:50%;
}
<div id="col1">
<img id="img1" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
<img id="img2" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
<img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
</div>
<div id="col2">
<img id="img1" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
<img id="img2" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
<img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
</div>