css - Border around a group of elements floated left? -

i have container div several items within it. container needs have border. problem need have elements floated left within container, , seems "remove" elements flow.

when try add border container, doesn't go around elements, if not within 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 work?

you need clear floats keep them inside container div.

just add div clear:both after last inner div , before final /div tag.

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

so full markup 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>