How do I get these boxes to align in either jquery or css

Question

I have boxes in a line, and I want it so when a new one is appended, it moves the others to the right and fits in on the left, and if the boxes overflow your screen they are simply hidden. I want to be able to keep appending so it needs to be I know I could fiddle with absolute position and jquery - use hidden input with box count, calculate the screen width and define left or right positions, but to be honest I'd rather not: I'm sure there's a way of doing it with overflows but I cant get anything to work. I am open to adding divs / css etc. Many thanks,

HTML:

<div id="boxWrap">
    <div id="innerWrap">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    </div>
</div>

jquery:

$(function()  {

  var html = '<div class="box"></div>';
  $('#boxWrap').append(html);

});

CSS:

.box {
    width: 100px;
    height: 100px;
    background-color: #333333;
    margin: 5px;
    display: inline-block;
    position: relative;
}
#boxWrap {
    width: 100%;
     overflow-y: visible;
    height: 20px;

}
#innerWrap {
    overflow-x: hidden;
    max-width: 100%;
}

Edit:

<button>Append</button>
<div id="boxWrap">
    <div id="innerWrap"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div>
</div>
<input id="count" value=0></input>




$('button').click(function(){

    var html = '<div class="box"></div>';
    $inWrap = $('#innerWrap');
    $inWrap.prepend(html);
    $lastBox = $inWrap.find('.box');

    var count = parseInt( $('#count').val(), 10 );
    count = count+1;

    $('#count').val(count.toString());
    var limit = $inWrap.width() / 110;
    if( 110*count >= $inWrap.width() ) {
        $lastBox.index(count-1).css( {"display": "none" }  );
    }

});

Answer 1

If you want the boxes to be added to the left of (before) the others, you'll want to use prepend() , you'll also want to call it on the parent of the boxes. You can keep your boxes on the same line by changing the white-space CSS property:

jQuery

var html = '<div class="box"></div>';
$('#innerWrap').prepend(html);

CSS

#innerWrap {
    white-space:nowrap;
    overflow-x: hidden;
    max-width: 100%;
}

JSFiddle

I'm not sure I've fully understood the question, but this is what I think you are looking for.

Answer 2

use float:right

.box {
    width: 100px;
    height: 100px;
    background-color: #333333;
    margin: 5px;
    display: inline-block;
    position: relative;
     float:right;
}

DEMO

Answer 3

You can achieve this by using display table/table-cell which are perfect for filling a container with a random number of child without overflowing.

.box {
    background-color: #333333;
    display: table-cell;
    color:white;
    text-align:center;
}
#boxWrap {
    width: 100%;

}
#innerWrap {
     width:100%;
    display:table;
}

Here is a fiddle to explain

You can click on "Click me" to add any number of box.

Another fiddle with margin and min-width