在Div中导致相邻的一个降低

Question

我在解决此问题的原因时遇到了很多困难。我有这个设置：

<div id='wrap'>
        <div id='left'>
        <!--content nothing much just text so far-->
        </div>
        <div id='right'>
            <img src="WWII.jpg" />
        </div>
</div>

然后对于CSS我有这个（我意识到我可以压缩一些）：

body,html {
    margin:0;
    padding:0;
}
#wrap {
    text-align:center;
}
#left {
    width:30%;
    height:700px;
    display:inline-block;
}
#right {
    width:65%;
    height:700px;
    display:inline-block;
    text-align:center;
}
#right img {
    position:relative;
    padding:0;
    margin:0;
    display:block;
    width:50%;
}
#right, #left {
    border:2px solid #0099FF;
    border-radius:1em;
}

正如您所看到的，两者都是内联块划分，因此它们并排站立。如果我删除HTML中的 img 标记，这可以完美地工作。但是，一旦我添加了 img 标签，左侧分区就会浮动到底部。这是JSfiddle：https://jsfiddle.net/99sz8mnv/

我为HTML文件中的所有代码（JS和CSS）道歉。

编辑：现在看来源根本不是 img 标签，根本不确定如何修复它。