Элементов с процентной шириной

Question

Fiddle

Проблема:

1. В моей скрипке, вы можете увидеть последнюю коробку (имеющую дату и кнопку) не совпадают с размером с другими. Этот ящик должен быть разделен на два, каждый из которых имеет ширину 50%.

2. налево, я хочу, чтобы дата контейнер составляет 50% по отношению к родительскому полю

3. справа, я хочу, чтобы кнопки контейнера быть 50% по отношению к родительскому полю
4. Кнопки должен быть выровнен по центру относительно его контейнера.

HTML

<div class='gc_container'> 
     <div class='gc_gift'> 
      <div class='gc_gift_inner'> 
       <div class='gc_amount'>TEST AMOUNT</div> 
       <div class='gc_subtitle'>TESTING SUBTITLE</div> 
       <div class='gc_hr'></div> 
       <div class='gc_terms'>Lorem Ipsum is simply dummy text of the printing and typesetting industry</div> 
       <div class='gc_footer'> 
        <div class='gc_footer_expiry'>Exp. March 27, 2013</div> 
        <div class='gc_footer_use_nix'> 
         <div class='gc_footer_use'> 
          <div class='gc_footer_button_wrapper'> 
           <div class='gc_footer_use_txt'>Use</div> 
           <div class='gc_footer_use_icon'>icon1</div> 
          </div> 
         </div> 
         <div class='gc_footer_nix'> 
          <div class='gc_footer_button_wrapper'> 
           <div class='gc_footer_nix_txt'>Nix</div> 
           <div class='gc_footer_nix_icon'>icon2</div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

CSS

.gc_gift { 
    margin-top:1.5%; 
    margin-left:auto; 
    margin-right:auto; 
    margin-bottom:1.5%; 
    height: auto; 
    width: 97%; 
    position:relative; 
    overflow: scroll; 
    webkit-overflow-scrolling: touch; 
    border:1px solid #D1D1D1; 
} 
.gc_gift_inner { 
    font-size:12px; 
    text-align: left; 
    background-color: #ffffff; 
    border:0px solid #D1D1D1; 
    display:table; 
    margin-top:2.5%; 
    margin-left:auto; 
    margin-right:auto; 
    margin-bottom:2.5%; 
    height: auto; 
    width: 95%; 
    position:relative; 
    overflow: scroll; 
    webkit-overflow-scrolling: touch; 
} 
.gc_amount { 
    color: red; 
    font-size:2em; 
} 
.gc_subtitle { 
    font-weight: bold; 
    font-size: 1em; 
    color: #707070; 
} 
.gc_hr { 
    width: 95%; 
    position: relative; 
    margin: auto; 
    border-color: #D1D1D1; 
    border-style: solid; 
    border-width: 1px 0 0 0; 
} 
.gc_terms { 
    font-size: 0.8em; 
    color: #707070; 
} 
.gc_footer { 
    width: 95%; 
    display: table; 
    position: relative; 
} 
.gc_footer_expiry { 
    display: table-cell; 
    vertical-align: bottom; 
    font-size: 0.8em; 
    font-weight: bold; 
    width: 40%; 
    color: #707070; 
    border: 0px solid yellow; 
} 
.gc_footer_use_nix { 
    display: inline-block; 
    vertical-align: middle; 
    width: 60%; 
    border:1px solid yellow; 
    margin: auto; 
} 
.gc_footer_use { 
    //display: table-cell; 
    display: inline-block; 
    vertical-align: middle; 
    background-color: #3F6EB6; 
    border-radius: 1px; 
    //padding: 5px 10px 5px 10px; 
    padding: 10%; 
    position: relative; 
    border:0px solid red; 
} 
.gc_footer_use_txt { 
    text-align: right; 
    display: table-cell; 
    vertical-align: middle; 
    color: white; 
    font-size: 1em; 
    font-weight: bold; 
} 
.gc_footer_use_icon { 
    text-align: right; 
    display: table-cell; 
    vertical-align: middle; 
} 
.gc_footer_nix { 
    //display: table-cell; 
    display: inline-block; 
    vertical-align: middle; 
    background-color: #D61920; 
    border-radius: 1px; 
    color: white; 
    font-size: 1em; 
    border: 0x solid green; 
    //padding: 5px 10px 5px 10px; 
    padding: 10%; 
} 
.gc_footer_nix_txt { 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
    position: relative; 
    border: 0px solid blue; 
    width: 50%; 
    font-weight: bold; 
} 
.gc_footer_nix_icon { 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
    position: relative; 
    border: 0px solid yellow; 
    width: 50%; 
} 
.gc_footer_button_wrapper { 
    display: table; 
    width: 100%; 
    position: relative; 
    border: 0px solid blue; 
} 
.gc_container { 
    background-color:#ffffff; 
    height: auto; 
    width: 90%; 
    display:table; 
    margin-top:3%; 
    margin-bottom:3%; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
    border:1px solid #D1D1D1; 
    } 
.gc_amount, .gc_subtitle, .gc_terms, .gc_footer { 
    border: 1px solid green; 
    padding: 5px; 
} 

Answer 1

Для элементов, которые должны появиться в том же смысле, я никогда бы не смешивать дисплей, Прокладки и ширину. Вы обязаны попасть в беду, в какой-то момент ... Если вам не нужно использовать таблицу дисплея, просто установите все, чтобы иметь дисплей «таблицы», с тем же отступов и ширины, например, так:

.gc_amount, .gc_subtitle, .gc_terms, .gc_footer { 
    border: 1px solid green; 
    display:table; 
    width:96%; 
    padding:5px; 
} 

Вот скрипка: http://jsfiddle.net/TdsBZ/11/

Но, как я уже сказал, я бы не смешивал их и никогда не использовал бы ширину набора вместе с дополнением. Поля - ваш друг; Я бы использовал те элементы .gc_amount, .gc_subtitle, .gc_terms, .gc_footer только для границы и ширины, и у них есть второй элемент в этих тегах, чтобы обеспечить дополнительный стиль.

вот еще одна скрипка с дополнительными тегами в разных стилях: http://jsfiddle.net/TdsBZ/14/