Вертикальное выравнивание только частично работает

Question

Вы знаете, почему мой зеленый DIV не выровнен по вертикали до середины красного DIV и как это исправить? Большое спасибо http://jsfiddle.net/kAXp9/

.wrapper-alt { 

    margin-right: auto; 
    margin-left: auto; 
    width: 980px; 
    display:table; 
    border: 1px solid #000; 
} 

.bigtext { 
    color: #124191; 
    font-weight: 600; 
    font-size: 53px; 
    text-align: right; 
    line-height: 53px; 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 

.block-left-alt, .block-right-alt { 
    display:table-cell; 
    vertical-align:middle; 
    padding:30px 0; 
    height:100%; 
    box-sizing: border-box; 
} 

.block-left-alt { 
float: left; 
background: red; 
    display:table-cell; 
    vertical-align:middle; 
    height:100%; 
    width: 50%; 
    text-align: right; 
    padding-right: 10px; 
} 

.block-right-alt { 
float: left; 
background: green; 
    display:table-cell; 
    vertical-align:middle; 
    height:100%; 
    width: 50%; 
} 

<div class="wrapper-alt"> 
<div class="block-left-alt bigtext">Pourquoi<br>faire appel<br> à nos services?</div> 
<div class="block-right-alt"><ul class="bullets1-alt"> 
     <li><i class="fa fa-check"></i> Reason 1</li> 
     <li><i class="fa fa-check"></i> Reason 2</li> 
     <li><i class="fa fa-check"></i> Reason 3</li> 
     </ul> 
</div> 
</div><!-- End Wrapper --> 

Answer 1

Удалить

float:left 

из .block-left-alt и .block-right-alt

Updated fiddle here.

Answer 2

Live Demo

Вы используете поплавок. Из-за поплавка <div> выходит из потока объекта, поэтому вы не можете установить его высоту 100%.

Исключительное решение - установить цвет фона родителя <div> таким же, как у меньшего <div>. Поэтому добавьте background: green; в .wrapper-alt.