Positioning

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Positioning

Post 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.
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

Yeah... and it's high time we add http://www.stopdesign.com/articles/absolute/ to the Useful Resources forum :P
Post Reply