CSS浮动div在调整窗口大小时重叠.我该如何阻止这种情况

Question

我刚刚在www.chartoonz.com 上重新完成了我的网站

我创建了一个包装器div，在其中放置了一个div，其中包含我在vimeo上的视频链接。我将这个div向左浮动，在它旁边，我将一个包含一些关于电影的文本的div向右浮动。在窗口调整大小之前，这些列看起来不错。然后它们重叠得很厉害，我不明白为什么。在窄窗口调整大小的情况下，我希望右浮动列跳到左浮动列的下面。

相关HTML如下所示：

<div id="CopyWrapper" >
        <div class = "copyFloatLeft">
        <p><strong>Use Video to Communicate.</strong></p>
        <p><iframe src="//player.vimeo.com/video/90334225" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></p>
        <br />
        </p>
        <br /><br />
    </div>
    <div class = "copyFloatRight">
            <strong>Corporate Communications</strong> 
            <p> Corporate communications can be greatly enhanced through a well presented video. Ideas and concepts are easier to understand when they can be seen clearly and their meaning is made plain. Here, I present some of the work I did over the last few months, helping the Merrill Lynch digital advertising division get their message out.</p>
    </div>
    <br /> 
</div>
<br class="clearFloat" />

管理CSS如下所示：

#CopyWrapper{
background: center;
text-align: left;
display: block;
float: left;
width: 65%;
padding-left: 200px;
position: relative;
margin: 0 auto;
clear: both;
overflow: hidden;
}

.copyFloatLeft{
background: center;
width: 45%;
margin:5px;
padding: 15px 15px 5px 15px;
position: relative;
clear: right;
float: left;
display: block;
}

.copyFloatRight{
background: center;
width: 45%;
margin:5px;
padding: 15px 15px 5px 15px;
position: relative;
clear: right;
float: right;
display: block;
}

如有任何帮助，我们将不胜感激。

Aharon

Answer 1

.copyFloatLeft和.copyFloatRight块都应向左浮动

对于iframes，我会做一些类似的事情：

#CopyWrapper iframe {
    width: 100%;
}