CSS - 固定流体柱

Question

在我的网站的正文中,我正在尝试创建两个列 - 一个在最右边,具有固定宽度(300px)用于广告等,一个在左边,将占用页面上的剩余空间.如何在CSS中实现这一目标？

Answer 1

CSS:

.column-right {
    float: left;
    width: 100%;
    height: 200px;
    background-color: red;
}

.column-right .column-content {
    margin-left: 250px;
}

.column-left {
    float: left;
    margin-left: -100%;
    width: 250px;
    height: 200px;
    background-color: green;
}

HTML:

<div class="column-right">
    <div class="column-content">
        <strong>Right Column:</strong><em>Liquid</em>
    </div>
</div>
<div class="column-left">
    <strong>Left Column:</strong><em>250px</em>
</div>

Answer 2

CSS：

#right-column{
 width:300px;
 float:right;
}

#other-column{
 float:left;
 width:100%;
 padding-right:20px; /*to prevent text overlap as suggested in the comment*/
}

在 HTML 中：

<div id='right-column'>
 <!-- ads here -->
</div>
<div id='other-column'>
 <!-- content here -->
</div>