Почему информация выводится поверх блока?

[illmano]

Пытаюсь вставить социальные кнопки, но они почему-то выводятся не в блоке а поверх его. Не могу понять почему.

Кто подскажет в чем ошибка?
Код можно посмотреть тут Для просмотра ссылки Войди или Зарегистрируйся

Просто не знаю какую часть кода сюда постить.

 

[Genk0]

1. .social_bar { overflow: hidden;}

 

[yaski]

.social_bar {
    background: url("images/sb_body_bg.png") repeat-x scroll 0 0 #FFFFFF;
    border: 1px solid #86502F;
    border-radius: 5px;
    height: 20px; /*добавить*/
    margin-bottom: 0;
    margin-top: -30px;
    padding: 12px;
}

height: 20px; добавь

 

[e1f1k]

Тогда уж не 20px, а 24px - высота кнопок гугл плюс. Чтоб не заморачиваться можно сделать - "display:inline-block; " а вместо height:20px; размер задать padding. Он еще и float заменяет отчасти, только расположение по baseline у него, а не по верхнему краю.

 

[Black#FFFFFF]

Дело не в этом. Тут проблема с определением границ блока. По умолчанию блок руководствуется своими размерами, и не учитывает границы вложенных блоков. Чтобы все сделать "наоборот" и не указывать четкие размеры, можно воспользоваться, например, кроссбраузерным решением .clearfix (добавлять такой класс ко всем элементам, которые будут учитывать размеры вложенных элементов

.clearfix{
    min-height: 0;
    *zoom: 1;
}
.clearfix:before,
.clearfix:after{
    content: " ";
    height: 0;
    width: 100%;
    display: block;
    overflow: hidden;
    visibility: hidden;
    float :left;
}

Это мой взгляд на .clearfix. Он отличается большей совместимостью со старыми браузерами, чем у того же bootstrap а, и не выводит неожиданностей, когда content: "." задают так. Я использую пробел. Этого хватит-) Собственно.