Div占用了另一个div的边距的所有空间

Question

我有一个内容div，宽度为960px，边距为0 auto（集中），我想把一个div占据左边距的所有空间，我该怎么做？

Answer 1

demo jsBin

  #container{
    position:relative;
    width:300px;/*change this*/
    margin:0 auto;
    height:200px;
    background:#cf5;
    padding-left:50%;
    margin-left:-150px; /*half the width*/
  }
  #centered{
    width:300px;
    height:100%;
    position:absolute;
    right:0px;
    background:#eea;
  }

HTML：

  <div id="container">  
    <div id="centered">centered</div>  
  </div>

这里：http://jsbin.com/oluwos/3/edit是另一种方法。

Answer 2

使用display：table，如下所示：

http://jsfiddle.net/yVFzh/

<div class="wrapper">
              <div class="left-column">&nbsp;</div>
              <div class="centre"></div>
              <div class="right-column">&nbsp;</div>
            </div>​


            html,
            body{
                width:100%;
            }
            .wrapper{
                display:table;
                width:100%;
            }
            .wrapper > div{
                display: table-cell;
                background: blue;
                height:400px;
            }
            .wrapper .centre{
                width: 960px;
                background: yellow;
            }​