Question

I have a div containing several other divs with setting float:left. Now I want a frame around all of them, so i put a border on the parent div, but the floating ones “flow” out of the frame…

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>

What can I do (in CSS) to keep them inside the parent frame?

Answer 1

add overflow: hidden to your parent <div> – http://jsfiddle.net/5AVA8/

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