Indie-Resource.com

I have no idea how in the world I ever survived with just now figuring this out and many of you will laugh at me for it but to pass it on for others I wanted to explain how to position a absolute div inside of another div instead of it ending up at the top left corner of screen.

Your container Div must have the attribute of Position: Relative and your child div inside of the container will be Position:absolute... You will now be able to position it based on players screen size and such.

i know I know, silly I did not realize this before. I have been working for hours creating a dynamically built map with images, links ect all from raw JS and dynamically created CSS and it came to me on how to get it working.

Hehe works like a charm, your solution. I prefer using floats though, it is still recommended to give the parent element a position relative, but it`s not necesary, as long as the parent element is a block element.

Anyway, divs work way better then tables right? I understand you use tables quite often.

The perfect solution is both.

I did try telling you this many times before :p

glad you finally understand how it works halls

a quick FYI though, as far as i am aware, it works providing your parent element contains any form of positioning attribute. fixed, absolute and relative (im sure there is atleast one more, but for the life of me cant think of it without opening up DW lol)

i know we discussed it and I have always known there was a way but at the time no mention of how to do it was mentioned. This was more of discovering how to do it rather than if it can be done. But glad it is discovered.

Hey I have been in and out for awhile but I'm back now and have been working on a game using your tutorials.

Anyway back to the topic. I have been trying to figure this out, but even after reading your description I still don't know. Could you give some example code so I can see what you mean?

Here we have a div placed in the middle of the pages body and inside that div we have an image we want to put in the lower right hand corner.

The image has been given its position attribute and its reference points.

due to the parenting element not having a position attribute set, the image works from the upper most parent which does, in this case the document body.

this will render a result like this.



adding the attribute 'position:relative' to the parenting div, the #container, will make the img reference from that element rather than the body.
This giving you this,


Hope this makes things easier to understand perry

Good example Torniquet! That`s exactly what`s supposed to happen

ANyway, there`s more to learn in HTML and CSS. I worked as front end developer from 05 till 08, so I have some experience in both of em. If there`s something you want to know..

Thanks It now makes perfect sense. For some reason when I was reading up on it I was under the impression that I needed to make the container absolute and the thing inside the container relative. Needless to say it was not doing what I expected, but now I understand. Thanks again.

welcome back perry! we missed ya!