Put items at the bottom of the page

Question

The red elements below are my divs, the big black rectangle is what the user sees in the browser (window), I think the image is self-evident, and it is html and css that cause the current result: / p>

<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

.wrapper{
  position: absolute;
  bottom: 10px;
  left: 0;
  width: auto;
  height: auto;
}

.wrapper div{
  float: left;
  margin: 5px;
  border: 1px solid red;
  width: 200px;
  height: 80px;
}

What do I need to change or add to make sure most divs go to the next line?

Answer 1

Here is the link to the created JSFiddle that does this: http://jsfiddle.net/WE2Gj/

I used jQuery to dynamically change the number of elements in each row, always allowing the vertex to have the least number of elements:

$(document).ready(function(){
    adjustWidths();
});

$(window).resize(function() {
    adjustWidths();
});

function adjustWidths() {
    cWidth = $('.child').width();
    numDivs = Math.floor($(window).width() / cWidth);
    $('.child').removeClass('clear');
    $('.child:nth-last-child('+numDivs+'n)').addClass('clear');
}

Answer 2

( , JS). div, , "nth-child". "float" "display: inline-block"

HTML

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS

div {
    position:absolute;
    bottom:0;
    vertical-align:bottom;
    display:table-cell;
    width:500px;
}
span {
    display:inline-block;
    width:100px;
    height:30px;
    border:1px solid red;
    border-radius:10px
}
span:nth-child(1) {
    display:block;
}

fiddle