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

Question

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

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

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

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%;
}