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