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..

    How to prevent rightmost inline element from wrapping or overflowing in CSS?

    section to be trigger of show/hide content by click html/css only

    How can I create a searchbar like this?

    css animation how to get the ball to bounce

    list-style-type no showing

    How to make a pie chart in CSS

    How to overlay a play button over a YouTube thumbnail image

    How to use “two-toned” font variants in CSS?

    How to reduce the indentation between first and second line inside circle?

    How can I apply CSS to an HTML text input?

    How to get SASS working with RequestReduce?

    CSS how to center ::after pseudo elem

    How to make angled borders for tables.

    How to make jQuery UI nav menu horizontal?

    How do I keep this sidebar stationary yet still responsive?

    How to override the color defined in css?

    How to Pause ALL CSS animations?

    How to set a different main content background for each page in weebly?

    How to get inputs in the same line with css?

    How to specify font-size for all bold text in the div?

    How to get block to change width if text is longer then the width in a multilevel listless drop down navigation menu

    How to make a CSS Menu “Selected” with Hover Image Gallery Effect?

    How do I make my text disappear when I hover over my div?

    How to Center a image with HTML CSS

    How can I implement dynamic styling for ion-list elements with AngularJS?

    How to create an animated rainbow line using CSS or Javascript?

    How can I create inline CSS in a WordPress PHP file without referencing to an external CSS file?

    How do I change the alignment of my search box?

    How to build sliding horizontal menu. CSS

    How to make a DIV float on top of another DIV without pushing down the CSS Underneath