将div放置在另一个div的底部

Question

I want to have a solid grey bar in a DIV called "bottomGrey" at the bottom of a container DIV called "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>

the CSS

#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%;
}

but it doesn't display at all, even if I remove the "contactLeft" and "contactRight" DIVS. This should be simple but :(

Live site: http://estes.nbson.com/contact.html

Answer 1

It is displaying: its just got a white background and no content. Add a background color to it and you'll see what I mean.

Answer 2

Just add this to your CSS:

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

With that you can remove <div id="bottomGrey"></div> and <div class="clr"></div> from your HTML structure, and get the grey border and clearing at the same time.

Answer 3

Give it a background color, 100% width and some content. Also Assuming the clr class is a clear fix implementation. Put it be for the bottom grey div. So contact copy will have a proper height, and bottom grey will sit bellow both floated divs. No need for the absolute position.