Пункты простираются за пределы div с обозначенной шириной и высотой

Question

У меня есть 2 divs с float:left. Оба имеют обозначенные ширины, высоты, прокладки и поля. Но на одном из divs содержимое с тегами абзацев резко переполняет правый край div.

Мой CSS изложен нас такой:

Содержание данного DIV ведет себя, как и ожидалось:

#upcomingevents 
{ 
    float: left; 
    background-color: #FFFFFF; 
    width: 300px; 
    height: 400px; 
    margin: 25px; 
    padding: 10px; 
} 

Содержание в этом Div перетекает правую сторону, создавая полосу прокрутки:

#maincontent 
{ 
    background-color: #FFFFFF; 
    float: left; 
    height: 400px; 
    width: 555px; 
    margin: 25px; 
    padding: 10px; 
} 

Оба эти divs обернуты в div, который имеет overflow:auto

#contentinner 
{ 
    overflow: auto; 
    width: 1000px; 
    margin: auto auto 60px; 
    padding-top: 20px; 
} 

Я действительно озадачен тем, почему #maincontentp ведут себя так. Может ли кто-нибудь сказать мне, что я сделал неправильно?

Answer 1

это одна непрерывная линия. Добавить

word-wrap: break-word; 

в #textcontent > p теги разбить строки