Border Overlapping Floated Divs

Question

I am working on styling a Twitter Feed Javascript for my layout. The issue is, when I float the date and interaction links, the border that's supposed to surround all the parts of the particular tweet ignores the date and interaction divs, causing the border to overlap with them.

Is there any way to remedy this issue. The issue can be viewed here (at the bottom of the page): http://www.noellesnotes.com

Relevent Code:

HTML

<div id="tweets">
    <ul>
        <li>
            <p class="tweet">The tweet.</p>
            <p class="timePosted">TIME</p>
            <p class="interact">INTERACT LINKS</p>
        </li>
    </ul>
</div>

CSS

.tweet, .tweet a, .tweet span, .interact a{
    margin-bottom: 10px;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif, Georgia, sans-serif;
    word-wrap:break-word;
}

.timePosted{
    width:40%;
    font-size: 12px;
    float: left;
    font-weight: bold;
    text-align: left;
}

.interact{
    width:60%;
    font-size: 12px;
    float: left;
    text-align: right;
    overflow: hidden;
}

.interact a{
    margin-right: 3px;
    text-decoration: underline;
    font-family: 'Arvo', Georgia;
}

#tweets ul{
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

#tweets ul li{
    border: 3px solid rgba(255,255,255,0.4);
    margin: 3px 0;
    padding: 3px;
}

Answer 1

This is the case for a clearfix div.

HTML:

<div id="tweets">
    <ul>
        <li class="clearfix"> <!-- clearfix class added here -->
            <p class="tweet">The tweet.</p>
            <p class="timePosted">TIME</p>
            <p class="interact">INTERACT LINKS</p>
        </li>
    </ul>
</div>

CSS:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {   /* for IE/Mac */
    display: inline-block;
}

There are a few other clearfix solutions I recommend searching to find and use the one that works best for your needs.