Wrap Div's when they reach width of parent div

Question

I am working on a file uploading system: Below I have a picture. I am trying to make the content wrap as soon as it reaches the end of the parent div. I'm not too skilled at css and am not sure how to do it.

I want to avoid using tables if possible. Basically there is a parent div which holds each file. And each file is it's own div. Is there any way to make it wrap when it reaches the parent div's width?

I can also change the items to be spans or anything if needed.

Answer 1

If you float the file DIVs inside the wrapper DIV (the one with the border) they should wrap.

For instance, take this HTML and apply this CSS:

.wrapper {
    width: 400px;
    height: 400px;
    border: 1px solid #000;
}

.item {
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #ddd;
}

<div class="wrapper">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>