How to place sticky footer div's next to each other when bottom:0 is set dynamically

Question

I am trying to place divs next to each other of which the divs act like a sticky-footer using position:absolute and bottom:0

HTML: (note that I could have many of these with different id but the same class)

<div id="s6234" class="sticky">
    <div id="s_content">
    Hello
    </div>
</div>


<div id="s7243" class="sticky">
    <div id="s_content">
    Hello
    </div>
</div>

CSS:

.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}

jsFiddle: http://jsfiddle.net/ZqaDe/

Preview: http://jsfiddle.net/ZqaDe/show

EDIT: I don't know how many divs there are every time. The divs there are appended dynamically. In the actual app, those div's can be deleted, moved or added so it they will keep changing every time. So basically I want a way so that the are placed every time next to each other.

EDIT 2: I don't think I am able to wrap all div's inside a main sticky footer and set a float:left so that they are placed next to each other. In the real example, the position:absolute and bottoom:0 is set dynamically. Updated fiddle: http://jsfiddle.net/u2nda/

Answer 1

You could have an empty footer div in which you append the divs you are minimizing. You then just need to set the position to relative, float the div left and reset top and left to 0.

So your JQuery string would become:

$(this).parent().parent().appendTo("#footer")
                         .css('position','relative')
                         .css('float','left')
                         .css('height','45')
                         .css('top','0')
                         .css('left','0')
                         .find('#s_content').hide();

JSFiddle: http://jsfiddle.net/u2nda/2/

Edit

Or better still, change the position to static, that way you do not need to reset the top and left values:

$(this).parent().parent().appendTo("#footer")
                         .css('position','static')
                         .css('float','left')
                         .css('height','45')
                         .find('#s_content').hide();

JSFiddle: http://jsfiddle.net/u2nda/3/

Edit 2

Or even better, just append classes that do not overwrite your inline CSS:

.tabMe {
    float: left;
    height: 45px;
    position: static;
}

.tabMe #s_head{
    border: 0;
}

.tabMe #s_content{
    display: none;
}

And your JQuery to show / hide could become:

$('#s_head button').on('click', function(){
    var check = $(this).parent().parent();
    if( !check.hasClass("tabMe"))
        check.appendTo("#footer").addClass("tabMe")
    else
        check.appendTo("body").removeClass("tabMe")                         
});

JSFiddle: http://jsfiddle.net/u2nda/4/