Question

For some reason the bottom-border would not display at the bottom? The border line appear at the top of the content, what the reason to this?

Is my css good?

HTML

<div class="rowOrder">
    <div class="orderid">
        <span>07/04/2011</span>
        OrderID 1234
    </div>
    <div class="company">
        My Company
    </div>
</div>

CSS

.rowOrder {
    padding:3px;
    border-bottom: solid 1px #B4CE51;
    display:block;
}
.rowOrder .orderid {  float:left; margin-right:30px;  }
.rowOrder .orderid span {
    display:block;
}

.rowOrder .company {
    float:left;
    font-weight:bold;
}

Answer 1

One weirdness that you can use to your advantage is, DIVs with overflow:hidden do grow to contain their floated elements. It’s a hack sure, but it works cross-browser. The overflow:hidden has no other effect since the containing DIV isn’t given any explicit size.