如果考虑dom顺序的话可以

<p class="left">
    <p class="content">
        left
    </p>
</p>
<p class="right">right</p>

html,body{height: 100%;overflow: hidden;}
.left{float: left;width:100%;background: #f00;height: 100%;}
.content{margin-right: 200px;}
.right{float: left;width:200px; height: 100%;  margin-left: -200px; background: #ccc;}

不考虑边框那些的话，用 CSS3 的做法是：

.p1 {
  width: 100px;
}
.p2 {
  width: calc(100% - 100px);
}

感觉有歧义啊，两个都固定了一共三个p，那么第三个宽度不是也固定了吗

可以用浮动或者绝对定位，flexbox应该也可以的。

1. flex

2. rightBox { float:right } .leftBox { position:absolute; left:0; right: .rightBox.width() }

3. rightBox { float:right; } .leftBox { padding-right: .rightBox.width() }

<style type="text/css">
    #container {
        width: 900px;
        height: 400px;
        background: #f5f5f5;

        position: relative;
        padding-right: 300px;
    }

    #right {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 300px;

        background: #e5e5e5;
    }
</style>


<p id="container">
    <p id="left">这是左侧宽度自适应内容区域</p>
    <p id="right">这是右侧固定宽度300px的区域</p>
</p>

以上DEMO中需要注意的有如下几点：

1. container 的定位需要为 relative （或者absolute、fixed也可以），其次，padding-right 设置的宽度为右边p的宽度；

2. 通过absolute绝对定位为 #right 右侧p进行定位显示

兼容性最好的

其他的还有table、flex等其他做法自己去搜吧

#sidebar{
background:red;
float:right;
width:300px;
}
#content{
background:green;
margin-right:300px;
}
.th{
height:100px;
background:gray;
}
#footer{
background:gray;
height:100px;
}
<p id="wrap">
<p id="sidebar" style="height:240px;">固定宽度区</p>
<p id="content" style="height:340px;">自适应区</p>
  </p>
  <p id="footer">后面的一个p，以确保前面的定位不会导致后面的变形</p>

给右边的p固定宽度，左边的box-flex值为1