CSS - 固定流体柱

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

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:

    

        Right Column:Liquid
    


    Left Column:250px