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


Tags: css,html,css-position,sticky-footer,sticky

Problem :

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/



Solution :

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/


    CSS Howto..

    Images don't show up in quiz results after start over button

    How to apply diffrent css style on different events of an asp button?

    How to get different style in nested element depending to depth level?

    How to reset Chrome dev tools CSS styles filter?

    How to avoid css transformation(rotate) when removing class?

    How to center text inside div in this specific situation? [duplicate]

    How to detect whether a browser has tap highlighting?

    css how to align a div to the top of a containing div

    How to select an html element that has two class names?

    How to truly align center of two elemnts with css?

    how to give conditional comments in firefox for a single css style statement

    How to have a logo in the middle of two menu lists?

    How to remove the default active tab color when another tab is active using jquery

    How to wrap text in css

    How can I make the ul list the same size as the input element in terms of width?

    How to dynamically change CSS using JS

    How do you set a JavaScript onclick event to a class with css

    How can I change using jekyll bootstrap navbar colour?

    How to put CSS and HTML in one page of code? [duplicate]

    How to change css display none or block with button click

    How do I keep a CSS hover rule applied when the mouse moves to the child element?

    How to Join HTML with CSS in NSString in iOS?

    How does a browser determine which cursor to use if multiple are set via CSS?

    How do you position CSS elements directly under each other?

    How do you get multiple views in one window like JSFiddle does [closed]

    How to display scroll bar onto a html table

    How can I make an element fit to fill the right part of the window?

    how to set part of circle as background in css

    DotNetNuke Skinning: How do I use\add skin.css?

    How can I develop a CSS based layout that is 100% browser compatible?