We want the bottom border to clear the floats. We can achieve this by
making the bottom border an element in itself, and setting clear on it.

So if you change your margin on .links to

    margin:8px 8px 0 8px;

i.e. all 8px except bottom (unless I got the order wrong there).

and then create a new selector:

    div.separator
    {
        border-bottom: 1px solid;
        margin-bottom:13px;
        clear: left;
    }

Then after each <p>description</p> add

    <div class="separator"></div>

in the content.

[1] divs _do_ grow to contain the divs inside them if they are
themselves the "block formatting context boxes" for the floats, which
they are if they are floated or positioned themselves.

So we can fix this another way without moving the borders to extra
separating divs by adding this to div.links:

    float: left;
    clear: left;
    width: 100%;

In this case the float doesn't actually visibly float to the left itself
because we make it width: 100%. We make it float:left not to make it
float to the left, but just to get the sideffect of starting a new block
formatting context.

Normally floats overflow their containers. This is so you can write
content like this:

<p> text blah blah <img style="float: right;" src="foo.png"> </p>
<p> more text blah blah blah </p>

In this example, if the first paragraph grew to fit the float in,
there'd be a vertical gap between the two paragraphs. This is less
desirable than the second paragraph starting in its proper place,
immediately below the first paragraph, but also flowing around the
float.

So that's why the float overflows its containing box. But it doesn't
overflow its block formatting context box.

CSS 2.1 9.4.1:

"Floats, absolutely positioned elements, inline-blocks, table-cells, and
elements with 'overflow' other than 'visible' establish new block
formatting contexts."

And then in CSS 2.1 10.6.7 ("'Auto' heights for block formatting context
roots"):

"In addition, if the element has any floating descendants whose bottom
margin edge is below the bottom, then the height is increased to include
those edges. Only floats that are children of the element itself or of
descendants in the normal flow are taken into account, e.g., floats
inside absolutely positioned descendants or other floats are not."

Why these extra rules?

One possible reason is to make the implementation easier. Floats are
already harder to implement than most things in CSS because text in
sibling, descendent, or descendent-of-sibling blocks has to be flowed
around them. This introduces extra complexity by breaking the assumption
that you can make almost everywhere else that the layout of an element
is only affected by its ancestors and descendents. If you can keep
floats inside their block formatting contexts however, you can limit
that complexity a bit.