позиционирование div в нижней части другого div

Question

Я хочу иметь сплошной серый бар в DIV под названием «bottomGrey» внизу контейнера DIV, называемый «contactCopy».

<div id="contactCopy"> 

    <div id="contactLeft"> 
      CONTACT 
    </div> 

    <div id="contactRight"> 
     <iframe src="https://www.google.com/maps/embed?pb=!1m5!3m3!1m2!1s0x87e2349d140afa9f%3A0x9b41dc0528aa1d72!2s131+W+2nd+St+%23400%2C+Davenport%2C+IA+52801!5e0!3m2!1sen!2sus!4v1389913120076" width="100%" height="100%" frameborder="0" style="border:0"></iframe> 
    </div> 

    <div id="bottomGrey"></div> 

    <div class="clr"></div> 
</div> 

СМЧ

#contactLeft{ 
    float:left; 
    width:30%; 
    padding:5%; 
} 

#contactRight{ 
    float:left; 
    width:640px; 
    height:480px; 
    padding-top:5%; 
    padding-bottom:5%; 
    margin-left:5%; 
    position:relative; 
} 

#contactCopy{ 
    position:relative; 
} 

#bottomGrey{ 
    position:absolute; 
    bottom:0; 
    height:10%; 
    width:100%; 
} 

но не отображается на всех, даже если я удалить "contactLeft" и дивы "contactRight". Это должно быть простым, но :(

Живой сайт: http://estes.nbson.com/contact.html

Answer 1

Он отображает:.. Его только что получил белый фон и нет содержания Добавить цвет фона для него, и вы увидите, что я имею в виду

Answer 2

Просто добавьте в ваш CSS:

#contactCopy:after { 
    display: block; 
    height: 10px; 
    width:100%; 
    background-color: grey; 
    content: ""; 
    clear: both; 
} 

При том, что вы можете удалить <div id="bottomGrey"></div> и <div class="clr"></div> из вашей HTML-структуры, а также получить серую рамку и клиринг на са мне время.

Answer 3

Дайте ему цвет фона, ширину 100% и некоторый контент. Также предполагаем, что класс clr - это четкая реализация исправления. Поместите его в нижний серый div. Таким образом, контактная копия будет иметь надлежащую высоту, а нижний серый будет сидеть ниже, чем плавающие div. Нет необходимости в абсолютном положении.