Tumblr Div spacing

by Pixic

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div id="content">
    <div class="postslide"></div>

    <div class="photo post">
       <img class="image" src="http://www.pixic.se/mytimeline-images/backlog_filter.png" alt="" />
    </div>
    <div class="photo post">
        <img class="image" src="http://www.pixic.se/mytimeline-images/my_weight_trendline.png" alt="" />
    </div>
    <div class="photo post">
       <img class="image" src="http://www.pixic.se/mytimeline-images/backlog-table.png" alt="" />
    </div>
    <div class="photo post">
       <img class="image" src="http://www.pixic.se/mytimeline-images/news-as-list-pagination.png" alt="" />
    </div>

</div>

CSS

/*
Answer to StackOverflow question:
http://stackoverflow.com/questions/20437551/center-an-array-of-elements-each-with-width-auto
*/

#content{
    top: 10px;
    left: 10px;
}
.post{
    position: absolute;
    width: auto;
    height: 320px;
    top: 20%;
    left: 300px;
    /*display: none;*/
    border-width: 1px;
    border-style: dotted;
    border-color: #000000;
}
.image{
    width: auto;
    height: 320px;
}

JavaScript

var arr = $('.post').toArray();
var pWidth = 0;
var pLeft = 0;
var space = 10;

for ( var i = 0; i < arr.length; i++ ) {
  var cWidth = $(arr[i]).width();
  var nLeft = parseInt(pWidth) + parseInt(pLeft) + space;

  $(arr[i]).css('left',nLeft + 'px');
  pWidth = cWidth;
  pLeft = nLeft;
}

    // I M A G E  S L I D E R
    $(window).keydown(function (e) {
        if (e.keyCode == 37) { //left arrow key 
            lastDiv.fadeOut(800);
            indexNum--;
            if (indexNum == -1) indexNum = arr.length-1; //if goes beyond first post, goto the last post
            $(arr[indexNum]).appendTo(".postslide").fadeIn(800);
        }
        if (e.keyCode == 39) { //right arrow key
            $('#instruction').fadeOut();
            lastDiv.fadeOut(800);
            indexNum++;
            if (indexNum == arr.length) indexNum = 0; //if goes beyond last post, goto the first post
            $(arr[indexNum]).appendTo(".postslide").fadeIn(800);
        }
    });