элементы списка ul переполняют родительский div

Question

Я чувствую, что это, вероятно, очень тупой вопрос, но, к сожалению, я должен его задать.

Как я могу сохранить мой неупорядоченный список от переполнения родительского div? Я знаю, что float: left на элементах li вызывает переполнение родительского элемента div, но мне нужно, чтобы элементы li плавали, чтобы они могли быть горизонтальными. Не уверен, что еще делать.

Вот что у меня есть http://jsfiddle.net/thwackukulele/vzzqY/

А вот как я хочу, чтобы это выглядело

Answer 1

Если вы хотите, чтобы плавающие элементы заполняли свой родительский контейнер без явной установки высоты, используйте overflow: auto в родительском контейнере. Если вы дадите ul свойство overflow: auto, оно будет работать согласно вашему скриншоту.

jsFiddle: http://jsfiddle.net/vzzqY/7/

Answer 2

Установите высоту 125px на .b1bkgd

.b1bkgd {
    background-color: #F2EEE7;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 30px;
    margin: 0 45px;
    height: 125px;
}

См. http://jsfiddle.net/neo108/zCXsc/1/