CSS两列，一个相对固定，相对最小宽度？

Question

我正在尝试制作左侧内容，右侧固定图像布局，但如果我使左侧列（包含所有内容）的相对定位为60％宽度，右侧列为40％宽度相对定位（其中包含固定图像div）当视口水平收缩时，固定图像仍然与左边的内容重叠。

http://dev.curran-connors.com/freelance/ironmountain-2014/ceo-letter.php

将视口水平缩小，您会看到右侧图像在文本变小时与文本重叠。有谁知道如何为内容创建最小宽度，并允许溢出水平滚动？提前谢谢。

Answer 1

CSS中的小变化可能会解决问题。 替换下面的css类，它将起作用。

.ceoLetter {
/* min-width: 760px; */
position: relative;
width: 60%;
z-index: 750;
}

.ceo-letter .rightCol {
bottom: 0;
float: right;
padding: 50px 0;
position: fixed;
right: 0;
top: 56px;
height: 95%;
width: 40%;
/* min-width: 485px; */
background-color: rgba(0, 71, 130, 0.75);
z-index: 2;
}

.ceo-letter .ceo-bg-rt {
background: url("img/building-rt-bl.jpg") no-repeat scroll right top /cover;
right: 0px;
top: 56px;
height: 95%;
width: 100%;
/* min-width: 485px; */
z-index: 9;
/* position: fixed; */
}

.rightCol {
position: relative;
/* max-width: 425px; */
z-index: 9;
height: 100%;
width: 40%;
}