Пограничные перекрывающиеся плавающие дивизии

Question

Я работаю над стилем Twitter-канала Javascript для моего макета. Проблема в том, что когда я плаваю дата и ссылки на взаимодействие, граница, которая должна окружать все части конкретного твита, игнорирует даты и взаимодействия divs, заставляя границу пересекаться с ними.

Есть ли способ исправить эту проблему. Вопрос можно посмотреть здесь (в нижней части страницы): http://www.noellesnotes.com

Релевент Код:

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

Это случай для clearfix дела.

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

Есть несколько других clearfix решения я рекомендую поиск, чтобы найти и использовать тот, который работает лучше для ваших нужд.