CSS Цвет фона для div

Question

У меня есть поле ввода и несколько изображений, вложенных в один div. На div я установил цвет фона, но проблема в том, что цвет фона отображается только для первого вложенного элемента, который является полем ввода, и не имеет цвета фона, где изображения попадают под него.

Вы можете увидеть его здесь: http://kbanda2.rochestercs.org/abc/home.html, имя пользователя & пароля = к

Раньше я имел фиксированную высоту для DIV, который решал эту проблему, но я не хочу иметь фиксированную высоту упаковывает добавляют больше элементов после.

При необходимости вы можете просмотреть источник страницы или просмотреть элемент.

Фактический код:

<div id="wrapper"> 
    <input type="text" id="tfq" class="tftextinput2" name="q" size="30" maxlength="120" value="Enter cuisine type" /> 
    <input type="submit" value="Go" onclick="pop()" class="tfbutton2" /> 
    <br/> 
    <ul id="da-thumbs" class="da-thumbs"> 
     <!--restaurants will be appended into here through a script--> 
    </ul> 
</div> 

CSS:

.da-thumbs li { 
    list-style-type: none; 
    float: left; 
    margin: 5px; 
    background: #fff; 
    padding: 8px; 
    position: relative; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    left:10px; 
} 
.da-thumbs li a, .da-thumbs li a img { 
    display: block; 
    position: relative; 
    color:white; 
    padding:5; 
} 
.da-thumbs li a { 
    overflow: hidden; 
} 
.da-thumbs li a div { 
    position: absolute; 
    background: rgba(75, 75, 75, 0.7); 
    width: 100%; 
    height: 100%; 
} 
.da-thumbs li a div { 
    //top: 0px; 
    bottom: -100%; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    -ms-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
} 
.da-thumbs li a:hover div { 
    bottom: 0px; 
} 
#wrapper { 
    max-width:940px; 
    margin:0 auto; 
    padding: 0 2%; 
    background:#dde0e1; 
} 

Answer 1

Проблема из-за плавающих элементов в списке. Все li в ul имеют поплавок.

Решение представляет собой класс clearfix на обертке div. И добавьте ниже css тоже.

CSS

.clearfix { 
    clear: both 
} 
.clearfix:after { 
    clear: both; 
    content: " "; 
    display: block; 
    font-size: 0; 
    height: 0; 
    line-height: 0; 
    visibility: hidden; 
    width: 0; 
} 

HTML

<div id="wrapper" class="clearfix"> 
content here 
</div> 

Answer 2

<div id="wrapper"> 
     <input type="text" id="tfq" class="tftextinput2" name="q" size="30" maxlength="120" value="Enter cuisine type"><input type="submit" value="Go" onclick="pop()" class="tfbutton2"> 
    <br> 
    <ul id="da-thumbs" class="da-thumbs"> 
    </ul> 
    <div class="clearfix"></div> 
    </div> 

В CSS

.clearfix 
{ 
clear:both; 
} 

Answer 3

Добавить Ове rflow: hidden; для обертки

#wrapper{ 
max-width: 940px; 
margin: 0 auto; 
padding: 0 2%; 
background: #dde0e1; 
overflow: hidden; 
}