Border around a group of elements floated left? - css

Question

I have a container div with several items within it. The container needs to have a border. The problem is I also need to have those elements floated left within the container, and that seems to "remove" the elements from the flow.
When I try to add a border to the container, it doesn't go around all the elements, as if they are not within the container.
<div class="container">
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
</div>
.one {
width:150px;
height:50px;
background:red;
margin:5px;
float:left;
}
.container {
width:350px;
border-style:solid;
border-width:2px;
border-color:black;
}
See: http://jsfiddle.net/ynwbzw97/
Any ideas how to get this to work?

Answer 1

As you pointed out, floated elements are removed from the flow. Since the .container element only contains floated elements, it essentially collapses upon itself. Therefore you need to clear the floated elements.
Either change the overflow of the .container element to soemthing other than visible in order to establish a new block formatting context:
Updated Example
.container {
width: 350px;
overflow: auto; /* added.. */
border: 2px solid;
}
Example Here
or use a pseudo-element clearfix:
.container:after {
content: '';
clear: both;
display: table;
}

Answer 2

You can do a simple hack with you class
.one{
overflow:auto;
}
Adding a child div in the last with the style clear:both is very decent solution.

Answer 3

You simply need to clear your floats to keep them inside the container div.
Just add a div with clear:both after the last inner div and before the final /div tag.
<div style="clear:both;"></div>
So your full markup would be:
<div class="container">
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div style="clear:both;"></div>
</div>