div не изменяется при переносе вложенных элементов

Question

У меня есть метка и текстовое поле внутри div, которое должно быть размером, соответствующим размеру и центрированному в окне. Когда окна достаточно широкие, они должны быть в столбцах. Когда окно слишком узкое, они должны быть сложены. Внутренние элементы обертываются, когда окно изменяется, но в точке, где текстовое поле обертывается, div не изменяется. Что не так?

<style> 
    label { 
     display: block; 
     float: left; 
     width: 10em; 
    } 
    input { 
     max-width: 98%; 
     width: 20em; 
    } 
    div.form-wrapper { 
     background-color: red; 
     display: table; 
     margin-left: auto; 
     margin-right: auto; 
     padding: .4em; 
     width: auto; 
    } 
</style> 
<div class="form-wrapper"> 
    <label for="Player">Player's name</label> 
    <input id="Player" type="text" /> 
</div> 

Answer 1

Это потому, что у вас есть плавающий элемент. Если вы удалите float, он изменит размер. Ниже приведен пример использования медиа запросов для удаления поплавка на меньших размеров экрана

DEMO http://jsfiddle.net/x8dSP/2707/

@media screen and (max-width: 400px) { 
    label { 
    float: none; 
    } 
}