position one div at the bottom of another?

[michaellunsford]

basically:

[code=php:0]<div style="float:right; width:500px; height: 400px">some content
<div style="bottom:0px">should be on the bottom of this div</div>
</div>[/code]


if I add "position:fixed;" or "position:absolute;" it will be centered left-to-right under the DIV, but it's at the bottom of the screen, outside the div.

[michaellunsford]

well, it's not dymanic, but it works:

[code]<div style="float:right; width:500px; height: 400px"><div style="height:360px;">some content
</div><div>properly displays on the bottom</div>
</div>[/code]

[ToonMariner]

you need to use positioning.

NOW the div you want to be at the bottom of a parent div use:

div#bottom{position: absolute; left: 0; bottom: 0;}

now normally that would put it at the bottom of the screen but in this case you need to assign position to parent element so try:

div#parent{position: relative; top: 0; left: 0;}

That shoudl do the trick for you.

[michaellunsford]

I tried it, but without the spacer div, the bottom just snuggles up to the content in the parent div.


[b]the plot thickens[/b]: the height of the child DIV is not stretching to accommodate the contents of the child (probably because the child's overflow isn't set correctly). If I set the child's overflow to auto, I get a scrollbar. How do I set overflow to stretch the height?

[code]#parent { height:auto; width:500px; background:url(/images/bgimage.jpg) repeat-x #069; }
#child {height:450px; width:500px; }
<div id="parent">
<div id="child">enough content to be higher than 450px</div>
<div>displays on the bottom</div>
</div>[/code]

[michaellunsford]

found this very good tutorial in google (just had to figure out what words to search for).

http://www.greywyvern.com/code/min-height-hack.html

and, despite the title, it's not a "hack" so much as a common sense method to achieve the goal -- creating a minimum-height without using the "min-height" property (which doesn't work in my browser anyway).

[b]so now[/b] if I can only figure out how to make my left column DIV the same height as the newly stretched right column DIV. hmmmmm...

[ToonMariner]

dead easy.

place an empty div at the bottom of your left hand div. give it an id and in your css use clear both.

ie.

<div id="left">
load s of stuff

<div class="clearright"></div>
</div>

div.clearright {clear: right;}

[michaellunsford]

Well, it doesn't exactly stretch the left div to the bottom, but it does allow me to assign a background color to a parent div, which will carry to the bottom of both. Awesome. Thanks for the help.