Процент двух столбцов и ширины

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; и width: 100%; к родительскому элементу, так как дочерний элемент установлен в display: table-cell;

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

Demo

Примечание: Я не могу найти никаких оснований для использования display: table;, так как вы можете добиться того же самого, используя поплавки с легкостью.

Answer 2

display: table-cell; 

проблема, почему не использовать только блок типа?

Answer 3

Попробуйте удалить display: table-cell;