图片旁边的文字

好的，所以，我有一个960像素宽的div。

我在div中有一张图片，该图片的宽度为640px，并且我希望另一个div旁边的文字为320px的宽度。当我这样做并向左浮动图像，向右浮动另一个div时，就会发生这种情况。

http://i.stack.imgur.com/qRleq.jpg

图片和“ VOIE WIE”必须在白色区域中，并且已设置了最小高度。

我该如何解决？

HTML：

<h2 id="pagetitle">ADEMHALING</h2>
<div id="foto"></div><div id="floatright"><h4 id="pagecontent">VOOR WIE</h4></div>

CSS：

#foto {
display: block;
width: 640px;
background-image: url(../images/ademhaling.png);
background-size: cover;
background-repeat: no-repeat;
height: 320px;
float: left; }
#floatright {
width: 310px;
border-top: #CCC 1px solid;
border-left: #CCC 1px solid;
float: right; }

JSFIDDLE