Float: left breaks container div?

У меня есть модальный блок, в котором я пытаюсь поместить два столбца рядом друг с другом, и я сделал это, назначив float: left для одного div (.center-columnb) и float: right to.map-column. Однако происходит то, что "center-columnb" разбивает контейнер div на серый градиентный фон, как если бы этот div был помещен под этим контейнером div (обратите внимание на закругленные края на нижней части серой части, которая должна была находиться на дно дива. Когда я удаляю float: слева от centercolumnb от style.css, все в порядке, за исключением того, что столбец справа больше не остается там. Есть ли у кого-нибудь альтернативы, которые могли бы мне помочь? Спасибо:)

Ответ 1

У вас есть родительский div #contentholder, но он не содержит поплавки внутри него в этой точке. Поляризованный элемент по умолчанию извлекается из потока документов, и любой родительский div будет сбрасываться. Чтобы он содержал поплавки внутри, вы должны дать ему свойство переполнения. Это должно сделать трюк:

#contentholder {
    overflow: auto;
}

Ответ 2

Другой способ - очистить внизу контейнера Question. Для полного решения, совместимого с кросс-браузером, просто добавьте перед закрывающим div:

<div style="clear:both"></div>