css - 宽度：部分屏幕上的 100%？

Question

我有一个难题：我需要您在右下角看到的最深灰色条（在本地打开以下代码后）跨越浏览器窗口允许的尽可能多的空间，而不会越过我设置的浅灰色部分左边。这是我的代码：

<div class="timeline-section">
    <div class="timeline-wrapper">
       <div class="mini-timline"></div>
       <div class="timeline"></div>
       <div class="clearfix"></div>
    </div>
</div>

CSS：

.clearfix { clear: both; }

.timeline-wrapper { position: relative; }

.timeline-section {
    background: #3d3d3d;
    bottom: 0px;
    height: 276px;
    left: 0px;
    width: 100%;
    position: absolute;
    padding: 0px;}

.mini-timline {
    background: #474747;
    margin: 0px;
    float: left;
    height: 276px;
    width: 500px;
    display: inline-block;}

.timeline {
    background: #232323;
    height: 200px;
    width: 60%;
    float: left;
    display: inline-block;
    position: relative;}

Answer 1

一种方法是不浮动timeline元素。
只需设置 amargin-left的宽度mini-timeline：

.timeline {
    background: #232323;
    height: 200px;
    margin-left:500px;
    position: relative;
    color:#FFF;
}

http://jsfiddle.net/rLzAM/1/

Answer 2

尝试这个：

.timeline {
    background: #232323;
    height: 200px;
    width: 100%;
    display: inline-block;
    position: absolute;
}