Всем привет! Подскажите пожалуйста, почему иногда при верстке блок выходит за пределы своего родителя хотя не должен. Вот, например, код и css свойства. Если для блока #twitter не указывать свойство float:left, то все отображается нормально, если если его указать ( а мне без него никак) то получается, что в блоке оказывается только заголовок H3, а все остальное выходит за пределы блока #twitter (изображено на скриншоте http://itmages.ru/image/view/3068042/909477b1 ), из-за чего некоректно отображается футер... почему так происходит?

<footer>
<div id="footer">
<div id="twitter">
<h3>TWITTER FEED</h3>
<date><a href="#">23 oct</a></date>
<p>Quisque in enim velit, at dignissim est. Nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.</p>
</div>
<div id="sitemap"><h3>SITEMAP</h3></div>
<div id="social"> </div>
<div id="logo-footer"> </div>
</div>
</footer>


свойства css:

#footer {
width: 960px;
margin: auto;
padding: 10px 0;
}
footer {
width: 100%;
background-color: #7e7e7e;
}
footer p {
margin: 5px 0;
}
#twitter {
width: 300px;
float:left;
}
#footer H3 {
margin: 0 0 10px 0;
color: #fff;
font: 14px 'Oswald', sans-serif;
border-bottom: 1px solid #919191;
}
#twitter date a{
color: #b4aeae;
}
#twitter p {
margin-top: 8px;
color: #dbdbdb;
padding-right: 15px;
}

Сообщение отредактировал matador2011 - 7.10.2015, 3:09