bottom-border does not go to bottom?

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;
}
开发者_开发知识库

1. Once you float an item it leaves the general flow, means the containing div will not act as a containing div, for example, for borders on the containing div. Solution, add another div at the end in rowOrder with style="clear:both" (or try to give this to the last internal div.
2. You do not need to give your div display: block
3. Don't give your span display: block just use div
4. It appears you try to represent tabular data. Semantics in this case is to use the <table> tag.

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.

You could try pointing Firebug at the elements to highlight where the divs are positioning themselves (or put background colors on them).

Perhaps it is a floating issue (try floating .rowOrder left?)

Floating elements screw up the flow of HTML, so you have to take that in account. And this is what's happening here.

You can easily see this, by using Firebug ( FF extension ) for example, and checking your rowOrder div. You should see that it doesn't have the full height of what it should be. Your orderID and company div have a certain height, but the containing div ( e.g. rowOrder ) has much less height. This is a typical indicator of floats not being cleared. The rowOrder div should have at least the height of everything it contains.

Itay's answer resolves the issue.

Floating elements aren't matched on parent height calculation. And the float property shouldn't be used for simple element alignment. For this we have the align property or the text-align property of parent element.

try this:

.rowOrder {
    padding:3px;
    border-bottom: solid 1px #B4CE51;
    display:block;
    text-align:left;
}
.rowOrder  {
    margin-right:30px;
}
.orderid, .company{
    display:inline-block;
    vertical-align:top;
}
.rowOrder .company {
    font-weight:bold;
}