Question

I have a container div inside of which i want to dynamically create other boxes(divs) using jquery. Each new box should be placed to the left side of other open boxes. Everything works fine except for the fact that boxes open to the right side of other open boxes. Here’s how i’ve done it so far:

#container{

    overflow-y:hidden;
    white-space:nowrap;
    border:none;
    position:relative;
    z-index:998;
    overflow:hidden;
    float:left;
    display:table-row;
    vertical-align:bottom;
}
.box{

    z-index:997;
    vertical-align:bottom;
    width: 225px;
    position:static;
    border:1px solid #666666;
    /*next lines are added to force boxes go to bottom when minimized-cross browser solytion*/
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
}

any suggestions?

Answer 1

Instead of appending them (i assume you are) use the prepend to add the new element at the start..

var newEl = $('<div>',{class:'box', text:'whatever..'});
$('#container').prepend( newEl );

demo at http://www.jsfiddle.net/gaby/acnNe/