positioning problem…

[stevedeer]

hi all… why is my yellow box not positioned to the bottom right of the red box?

http://jsfiddle.net/stevedeer/QtZWy/23/

cheers

[Mottie]

Try this. All I did was add “position: relative” to the red box and change the yellow to “position: absolute”.

Check out this primer on how to use positions and floats, it helped me when I first started out.

[stevedeer]

mottie… thank you very much!

[artsibelle]

Right on Mottie.

@stevedeer: what you did the first time essentially said, “yellow box, relative to the current position you’re in, shift to the right by 0px, then shift to the bottom by 0px”. That’s why it didn’t move! : )

In absolute positioning you’re sort of looking from the perspective of the container (the red box in your case). So what you really wanted to say was :

“I want the bottom of my yellow box to be 0px away from the bottom edge of its container, and the right side of my yellow box to be 0px away from the right edge of its container”.

Not confusing I hope, it takes some getting used to : )

[stevedeer]

ah… so ‘position:relative’ in the red box kinda switches it on as an enclosing container? But what if I want the red box to have an auto height (the copy in the red box should push the yellow box down and make the red box longer), wouldn’t that cause problems with the absolute positioned yellow box?

artsi… cheers. Yep it’s confusing but the penny will drop at some point ;-)

[Mottie]

The problem with absolutely positioned elements is that they are taken out of the flow of the page, so if the outer box gets a lot more text inside, it will flow behind the yellow box.

As for the content in the red box, it will expand… up, since it is attached to the bottom right corner.

[Author]

Posts