html - 流动的固定内容

Question

要让这种流动固定的布局发挥作用还缺少什么？

HTML:

<div class="header">
    <div class="title">Title</div>
    <div class="options">Opt</div>
</div>

CSS:

.header{margin:0;padding:0;}
.title{margin-right:50px;}
.options{float:right;width:50px;position:relative;top:0;left:auto;}

演示:http://jsfiddle.net/7Sdq6/

下面的链接有效，但我无法弄清楚上面的示例缺少什么。

http://jsfiddle.net/andresilich/6vPqA/13/show/

编辑:我可以绝对定位 .options 但我在其中有一个下拉菜单，我不希望下拉菜单的位置相对于 .options

Answer 1

Demo

添加

display:inline-block;

代替 margin-right: 50px 使用 width: calc(100% - 50px)

Demo

CSS

.header {
    width:400px;
}
.title {
    width: calc(100% - 50px); /* takes the width of the parent and we substract the width of the right floated div from it instead of using margin-right */
    background: red;
    display: inline-block;
}
.options {
    float:right;
    width:50px;
    background: blue;
}