absolute positioning (CSS and HTML)

[bitbob]

Isn't it posible to position something (a div or image) absolutely, relative to something else then the whole document?

My problem:
I have a table and inside a cell I have a div. Inside this div I want to position some images. I was hoping that (for example) posiotion:aboslute top:40px; left:10px; would work, but this puts the images at (40,10) relative to the whole document and not (40,10) relative to the div inside the table cell. Using position:relative doesn't work either, since the images will position themself relative to each other and not relative to the div...

The only solution that I can think of that will work is to use frames. But I really, really don't want to use that... Any suggestions?

[mwinter]

Isn't it posible to position something (a div or image) absolutely, relative to something else then the whole document?

Yes. CSS introduces the concept of a containing block, which usually corresponds to the parent of a particular element within the document tree. For example, the rows that contains table cells, the sections that contain those rows, and finally the table itself. The position of an element is calculated with respect to these containing blocks.

As far as absolute positioning is concerned, there is an added constraint to consider: the containing block must be positioned. That is, something other than 'position: static', which is the default. If the user agent cannot find an applicable block, it uses the initial containing block - the document root - to calculate the position.

The usual solution is to relatively position the container - the div element in your case. You don't need to provide any offset properties (top, right, bottom, or left); just apply 'position: relative' to the element.

If the containing block is block-level (as it is in this case), the co-ordinates (0,0) will be the top left corner, just inside the border of that element. The rules for containing blocks that are inline (such as a span or a element) are different, and I'll skip them for simplicity.

Using position:relative doesn't work either, since the images will position themself relative to each other and not relative to the div...

Correction: relative positioning offsets an element relative to its 'usual' position. The user agent effectively renders the element normally, then shifts it according to the offset properties. But essentially you're right: it's not what you're after.

Hope that helps,
Mike

[bitbob]

Thanks... I can't get any parent-child relationship to work... No matter what I do I won't work for my solution. The div I want my image to be displayed in is in a table cell with a fixed width and height, allthough the cells to the left and right and above isn't fixed at all. I need pixel-precise positioning so position:relative; is out of the question too.

I guess I will have to make a frameset . I'll get rid of the table, have the middle frame fixed to a specific width and position within it's fram and use position:absolute for my images... Not what I wanted and it will probably not work in the long run since I would like the div with the images in it to be scrollable... I guess I'll see...

Thanks though

[mwinter]

Thanks... I can't get any parent-child relationship to work...

Could you post a link to a small example that demonstrates what you've tried?

Mike

[spyder]

this is really helpful. i used it on my spanish project (http://willie.envisionssoftware.com/...ges/home.html). it is alot easier than trying to line up all the frames. the code is:

you can put this on a number of things such as in img tags, and table tags

style="position:absolute;top:100px;left:10opx"

[spyder]

oops, i just read through your post, and relized that mine was redundant. sorry bout that.