两个 div，一个固定宽度，另一个，其余

There are quite a few ways to accomplish, negative margins is one of my favorites:

http://www.alistapart.com/articles/negativemargins/

Good luck!

set your right to the specific width and float it, on your left just set the margin-right to 250px

.left {
vertical-align: middle;
min-height: 50px;
margin-right: 250px;
overflow: auto

}

.right {
width:250px;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto
}

If you can wrap them in a container <div> you could use positioning to make the left <div> anchored at left:0;right:250px, see this demo. I'll say now that this will not work in IE6 as only one corner of a <div> can be absolutely positioned on a page (see here for full explanation).

See: http://jsfiddle.net/SpSjL/ (adjust the browser's width)

HTML:

<div class="right"></div>
<div class="left"></div>

CSS:

.left {
overflow: hidden;
min-height: 50px;
border: 2px dashed #f0f;
}


.right {
float: right;
width: 250px;
min-height: 50px;
margin-left: 10px;
border: 2px dashed #00f;
}

You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?

If you can flip the order in the source code, you can do it like this:

HTML:

<div class="right"></div> // needs to be 250px
<div class="left"></div>

CSS:

.right {
width: 250px;
float: right;
}

An example: http://jsfiddle.net/blineberry/VHcPT/

Add a container and you can do it with your current source code order and absolute positioning:

HTML:

<div id="container">
<div class="left"></div>
<div class="right"></div>
</div>

CSS:

#container {
/* set a width %, ems, px, whatever */
position: relative;
}


.left {
position: absolute;
top: 0;
left: 0;
right: 250px;
}


.right {
position: absolute;
background: red;
width: 250px;
top: 0;
right: 0;
}

Here, the .left div gets an implicitly set width from the top, left, and right styles that allows it to fill the remaining space in #container.

Example: http://jsfiddle.net/blineberry/VHcPT/3/

Use the simple this can help you

<table width="100%">
<tr>
<td width="200">fix width</td>
<td><div>ha ha, this is the rest!</div></td>
</tr>
</table>

1- Have a wrapper div, set the padding and margin as you like
2- Make the left side div the width you need and make it float left
3- Set the right side div margin equal to the left side width

.left
{
***width:300px;***
float: left;
overflow:hidden;


}


.right
{
overflow: visible;
***margin-left:300px;***
}






<div class="wrapper">
<div class="left">
...
</div>


<div class="right" >
...
</div>


</div>

Hope this works for you!

You can use calc() Function of CSS.

Demo: http://jsfiddle.net/A8zLY/543/

<div class="left"></div>
<div class="right"></div>


.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}


.right {
width:200px;
height:200px;
background:red;
float:right;
}

Hope this will help you!!

It's 2017 and the best way to do it is by using flexbox, which is IE10+ compatible.

.box {
display: flex;
}


.left {
flex: 1;  /* grow */
border: 1px dashed #f0f;
}


.right {
flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
border: 1px dashed #00f;
}

<div class="box">
<div class="left">Left</div>
<div class="right">Right 250px</div>
</div>

If you need a cross browser solution, you can use my approach, clear and easy.

.left{
position: absolute;
height: 150px;
width:150px;
background: red;
overflow: hidden;
float:left;
}
.right{
position:relative;
height: 150px;
width:100%;
background: red;
margin-left:150px;
background: green;
float:right;
}