Ok, so here's the thing... my concept is of a website with four equal-sized frames (top left, top right, bottom left, bottom right - consisting of two rows subdivided into two columns). There is no scrolling allowed in any of the frames, but they can be resized. Like so (this isn't really important, but I might as well show the code):


Each of the frames contains an image with a fixed resolution of 757x570.

Each of the four images is aligned to the point between the 4 frames, so: upper left image to bottom right corner of its frame, upper right image to bottom left corner of its frame, etc.

Aligning an image to the upper left corner of a frame (so that it stays in the upper left corner when the frame moves) is easy because that's its natural position. Aligning it to the upper right is also easy - I just have to add a simple code within the image tag.

But the bottom left and bottom right are very tricky, and I was wondering if someone here could help. I don't really care which language is used, I'd just like to see it done somehow.

The only way I found to align something to the bottom is explained here (example page). Unfortunately, there are two problems with this method - first of all, if the stuff that's placed at the bottom (be it text, as in that example, or an image, which is what I want) touches the top of the page, it stops being assigned to the bottom. Because my image is bigger than the initial size of the frame, it hits the top and the result is that it might as well be assigned to the top (to see what I mean, try making that example page really small and see how the text that was at the bottom sticks to the top of the page if the window gets narrow enough).

The second problem is that I can't figure out how to align it to the bottom AND to the right. My attempt at this (which produces no result) you can see below:



Anyway, I really hope that someone can help with this complicated question. As I said, I'm open to using ANY language to get the result.

This post has been edited by Esn: 9 Dec, 2006 - 10:33 PM

I experimented with the example that you referred to and didn’t see what you referred to in the above quote. The positioned text remains at the bottom of the document in Firefox 2 and at the top of the window in Internet Explorer 7 (regardless of the viewport dimensions).

I wouldn’t use the code that you referred to at felgall.com anyway because it uses CSS to exploit both a browser flaw and lack of CSS support in Internet Explorer 6. The star‐HTML exploit doesn’t work in Internet Explorer 7 since that was fixed nor does the attribute selector exploit work in that browser because that browser now supports attribute selectors. The display: table and display: table-cell declarations are still not supported by Internet Explorer 7 however, so the example does not work in that browser.

With that said, what you need is absolute positioning (position: absolute) and the four positioning properties (top, right, bottom, left) to position the images relative to each document’s respective frame. Here’s a working example that, unlike the code you’ve shown, is also valid XHTML. It’s been tested in Firefox 2 and Internet Explorer 7.

Oh man, words cannot express my gratitude here. THANK YOU!

I've been asking lots of people this in the past few days, and was giving up hope of finding an answer. I can't believe that someone would help a newcomer like me and create a whole example page - it was exactly what I was looking for, and I think I can figure out how it works now (I was confused for a little while because I downloaded it to my PC and forgot about the master.css file).

Thank you very much. There isn't much I can do in return, but... maybe I'll stay around on this forum for a while. You guys clearly have a good thing going here (by the way, I found this forum from a google ad).