Как сохранить плавающий div внутри рамки родительского div?

У меня есть div, содержащий несколько других div с установкой float: left. Теперь я хочу фрейм вокруг всех из них, поэтому я помещаю границу в родительский div, но плавающие "текут" из кадра...

CSS

.rendering {
    padding-left:10pt;
    border-width: 1px;
    border-style: solid;
}
.column {
    float:left;
    padding-left:10pt;
}

Html:

<div class="rendering">
    <div class="column">
        <img class="ImagePlugin" src="some-image">
    </div>
    <div class="column">
        <span class="phone">999</span>
        <span class="name">Assange</span>
    </div>
</div>

Что я могу сделать (в CSS), чтобы держать их внутри родительского фрейма?

Ответы

Ответ 1

добавить overflow: hidden в родительский <div> - http://jsfiddle.net/5AVA8/

.rendering {
    padding-left:10pt;
    border-width: 1px;
    border-style: solid;
    overflow: hidden;
}

Ответ 2

Вы не очищаете поплавки. Если вы измените свой код на это, он решит вашу проблему.

.rendering {
    padding-left:10pt;
    border-width: 1px;
    border-style: solid;
}
.column {
    float:left;
    padding-left:10pt;
}

.clear {
     clear: both;   
}

<div class="rendering">
    <div class="column">
        <img class="ImagePlugin" src="some-image">
    </div>
    <div class="column">
        <span class="phone">999</span>
        <span class="name">Assange</span>
    </div>

    <div class="clear"></div>
</div>

См. пример, который я здесь установил - http://jsfiddle.net/spacebeers/RQNDr/

Для получения дополнительной информации о свойствах clear - http://css.maxdesign.com.au/floatutorial/

Ответ 3

Вы должны "очистить float", существуют различные методы "очистки флота". Некоторые решения включают только CSS, мое предпочтительное решение (не нравится некоторым людям, поскольку добавляет дополнительную разметку) заключается в добавлении "очищающего div", оно работает следующим образом:

<div class="rendering">
    <div class="column">
        <img class="ImagePlugin" src="some-image">
    </div>
    <div class="column">
        <span class="phone">999</span>
        <span class="name">Assange</span>
    </div>
    <div style="clear:both"></div>
</div>

См. вторую из последней строки.