Question

I have a div that I would like to have a bottom border.

This can be see at http://jsfiddle.net/R5YN2/

What causes the border to not be placed right at the bottom?

Answer 1

Your container element isn’t accounting for the floated elements and is basically collapsing.

Give it the property overflow: auto and it should work:

#recurring-header-wrapper {
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;

    overflow: auto;
}

Demo: http://jsfiddle.net/R5YN2/14/

---

Also, go easy on the class names. You can have selectors that target classes inside of elements:

#recurring-header-wrapper .label

Which matches only .label elements inside of the recurring-header-wrapper element. No need for huge class names.