CODEWITHSUNDEEP
jquerycsshtml
user2486535
user2486535

Reputation: 428

Css to make a div stay at the bottom of a div

I am having some html like below ..

<div id="dynamicheight"></div>
<div id="one"></div>
<div id="two"></div>
<div id="target"></div>

if u see the html "dynamicheight" div will get height dynamically on pageload and i want the "target" div to stay always at the bottom of "dynamicheight" div(as per its height)

note: there are couple other div's in between as shown in html

i am trying to do below css

#dynamicheight{
    position: relative;
}
#target{
    position: absolute;
    bottom: 0;
}

but its not working any work around plz...........

Upvotes: 0

Views: 6074

Answers (5)

Hashem Qolami
Hashem Qolami

Reputation: 99464

Please note that #dynamicheight and #target elements are siblings.

They'll be rendered one after another in document normal flow.

You probably need to manipulate DOM, to achieve this (without removing #target element from document flow by using absolute positioning):

jQuery(function($){
    $('#target').insertAfter('#dynamicheight');
});

JSFiddle Demo #1.

But, in some cases, it might be better to move the second element into the first one:

jQuery(function($){
    $('#target').appendTo('#dynamicheight');
});

In this case, you need to use position property to keep the second element at the bottom of the first one:

#dynamicheight {
    position: relative;
    height: 400px; /* Just as demo */
}

#target {
    position: absolute;
    bottom: 0;
    width: 100%;  /* Optional */
}

JSFiddle Demo #2.

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

you have used in html id or in css you have defined class

so please change if in css remove class and write id

DEMO

html

<div id="dynamicheight"></div>
<div id="one"></div>
<div id="two"></div>
<div id="target"></div>

css

#dynamicheight{
    position: relative;
}
#target{
    position: absolute;
    bottom: 0;
}

Upvotes: 0

Mohsen
Mohsen

Reputation: 269

you can change the markup to be 

<div id="dynamicheight" class='dynamicheight'></div>
<div id="one"></div>
<div id="two"></div>
<div id="target" class='target'></div>

or change css to be 

#dynamicheight{
    position: relative;
}
#target{
    position: absolute;
    bottom: 0;
}

Upvotes: 0

Anton
Anton

Reputation: 32581

The selector is incorrect. You are applying to dynamicheight class. Change . to #

#dynamicheight{
    position: relative;
}
#target{
    position: absolute;
    bottom: 0;
}

Upvotes: 2

Kazuki
Kazuki

Reputation: 1492

If you are writing CSS for element with certain ID, you need to write #target, not .target.

Upvotes: 1

Related Questions