Stick something to Bottom of DIV

Hi I have a DIV which has a min-height of 300px, in fact the DIV is unlikley to surpass this so we could say it has a height of 300px.

This DIV will contain some text, and another DIV inside it. How can i ensure this secondary DIV always appears at the bottom, regardless of how long or short the dyanmic text is.

I guess we can't use margin or padding, because the text above the DIV is dyanmic, therefore we couldn't calculate it?

The second DIV I want to appear at the bottom isn't dynamic and has a fixed height of 24px?

Hmm I have an idea actually, if I have the secondary DIV appear after the main DIV is closed, so that it is not nested inside it, and shove a negative margin of -24px on it could be a way.

Maybe I could use some positioning?

 

put the text in a div as well, and assign that div a height of 300 minus 24 (if you have no paddings).

 

Yes that's what i've done thanks for the help, I thought of it as I was writing the post, why wasnt i just creating the DIV as height of 276px!! Silly me, thanks for the help !!

 

That wouldn't work if the div ended up longer than 300px. If I understand what you're trying to do, you could also place another div under that one and set it to a negative margin.

div.whatever { margin-top: -30px; }

Code (markup):

 

What you could do is something like this...

<div style="height: 300px; background-color: red; width: 100px">
 <div style="position: relative; top: 274px; height: 24px; width: 100px; background-color: green"> 
  test
 </div>
</div>

Code (markup):

Of course you can change all the info in it, such as the colors, width etc. Those were jsut used so you can see the change in the divs easier.

Cheers.

 

I wouldn't do it that way-- position relative changes where it visually is, not where it really is-- might as well take it out of the document entirely anyway then (otherwise if the div gets higher than 300px (as it would with just a single text enlarge, or simply viewing on my machine which makes fonts a bit larger than normal, Linux machine) then div2 will not get out of the way).
top: 274px;
Doesn't work when the content of div1 grows... but you could do this:

div1 {
position: relative;
min-height: 300px;
padding-bottom: 24px; (this is the flaw in this plan, except you won't see this space at the bottom because the second div will always be in there...)
}
div2 {
position: absolute;
bottom: 0;
set left: 0 here too;
height: 24px;
}

It will always sit at the bottom of its positioned parent, and the div1's bottom padding prevents the content of div1 from covering div2.