html - 2 列の div と幅のパーセンテージ

Question

の使用に問題width:100%があります。画面幅全体には伸びませんが、ピクセルを使用して指定すると機能します。仕組みがわかりません。パーセンテージを使用して、任意の画面サイズで自動的に調整したいと考えています。

/*width: 600px; */    /* THIS WILL WORK */
width: 100%;           /*WON'T WORK*/ 

JSFiddle: http://jsfiddle.net/utBRH/9/

CSS:

    #wrapper{
        width:600px;
        height:600px;
        position:relative;
    }

    #search_box {   
        background-color:#050505;
        height:300px;
        /*width: 600px; */    /* THIS WILL WORK */
        width: 100%;           /*WON'T WORK*/ 
        display: table-cell;
        vertical-align: middle;
        text-align: center;

    }

    #btn_search_orange{
     display: inline-block;
      width: 40%;
      height: 80%;
      text-align: left;
      background-color:#e47700;
    }

    #btn_search_black{
      display: inline-block;
      width: 40%;
      height: 80%;
      text-align: left;
      background-color:#555454;

    }

Answer 1

それを機能させるには、子要素がに設定されているため、親要素にdisplay: table;andを割り当てる必要がありますwidth: 100%;display: table-cell;

#wrapper{
    height:600px;
    position:relative;
    display: table;
    width: 100%;
}

デモ

display: table;注: float を使用して同じことを簡単に実現できるため、を使用する正当な理由はありません。

Answer 2

display: table-cell;

ブロックタイプだけを使用しないのはなぜですか？

Answer 3

削除してみてくださいdisplay: table-cell;