Page 1 of 1

Positioning

Posted: Wed Dec 20, 2006 8:08 pm
by iknownothing
Hey all,
I have some text which I would liek to be positioned at the bottom right of its container, but other text is also in the container. So far, I have tried:

Code: Select all

position: relative
which positions it only relative to the text

and

Code: Select all

position: absolute
which just positions it to the very bottom right to the entire page.

I was wondering if there is any medium between the 2, as I want it positioned right on the bottom right of the container.

Posted: Wed Dec 20, 2006 9:40 pm
by neophyte
Hmm I'm not really sure with out seeing more code. But there is another way. It would probably involve float, clear, and some padding and margin adjustments, and possible some negative numbers in the margins.

Posted: Thu Dec 21, 2006 1:45 am
by matthijs
What you can do is use position:relative; on the parent div. Give it some padding at the bottom. Then position the element (say child div) absolutely at the bottom.

Code: Select all

#parentdiv {
  position:relative;
  padding: 0 0 50px;
}
#childdiv {
  position:absolute;
  bottom:0;
  left:0;
  height:50px;
}
For the childdiv you could also use em as a unit for the height (and use em for the bottom padding as well). Then the height of that element scales when a user resizes his text size.

Posted: Thu Dec 21, 2006 3:40 pm
by Oren
Yeah... and it's high time we add http://www.stopdesign.com/articles/absolute/ to the Useful Resources forum :P