want to position element at bottom of a div

[icpooreman]

Hey there's hopefully a simple answer to this but I've been having some real trouble with it. All I want to do is position something at the bottom of a div w/out using an exact amount of pixels.

Like so

--------------------------------------
¦
¦
¦ I want my Item to always be here
¦------------------------------------

[D_Blackwell]

Option 1:

Assign {position: relative;} to the first div. This will allow you to use {position: absolute; with the next one.

(height: and background-color: added for display purposes)

(Assign width: to the second div as necessary, if necessary.)

<div style="height: 150px; position: relative; background-color: #ccc;">
<div style="position: absolute; bottom: 10px; background-color: #ddd;">
BOTTOM DIV
</div>
</div>

[icpooreman]

Thanks that was why I couldn't get it to work.

[mchristine]

I've had the same problem.

But I want the bottom div to be always at the bottom, whatever the length of the first div. So "position :absolute" here cannot work.

Any ideas on that?

thanks

[D_Blackwell]

Bottom of what? The window? Another <div>?

So "position :absolute" here cannot work.

{postition: absolute;} is pretty powerful for putting things on the bottom of boxes.

[LouLou]

Hi,

i recently had this same problem.

I had a footer that moved with the page height. At the bottom of the left nav i had a logo and some text that needed to always be the same distance from the footer.

I placed the div #logo within the #footer and the css was like as follows;

#footer{position:relative;
clear: both;margin-bottom:0px;
height:15px;padding-top:3px;padding-left:15px;width:780px;}

#logo{position:absolute;top:-23em;
left:0px;height:200px;width:160px;
z-index:1;
margin-bottom:0;margin-top:0;margin-right:10px;top:-20em;}

basically in this instance i used negative values to say place my absolute div 20ems above the relatively placed footer. Mac doesn't alwys like this and i had to tweak the values for firefox.

Hope this helps.

[faltered]

Absolute positioning takes the element out of the natural flow of your other elements.

I suggest using a DIV with the text inside of it that you always want to be at the bottom. What you're looking for is basically a footer.

Try specifying a width for every element, and for your footer make sure it takes up the entire width of its parent div. That way it won't pop up where it's not supposed to be. If need be, use the clear element like someone alluded to.