css - 別の div からのマージンのすべてのスペースを占める Div

Question

幅 960 ピクセル、マージン 0 自動 (集中型) の 1 つのコンテンツ div があります。左マージンのすべてのスペースを占める 1 つの div を配置したいのですが、どうすればそれを行うことができますか?

Answer 1

デモ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;
            }​