boxes w/images, vertical alignment

newbie tries hand at getting "quirky" design idea working...

[glogo]

Greetings to all,

Was doggedly searching the web last night, trying to find out how to get vertical alignment working with different css elements.
Without posting a lot of code here, this is what I wanted to do.

If you can imagine, I wanted to make a kind of kaleidoscope using four images on a webpage and using the resizing of the images through giving a width=nn% call in the inline code. Well, that is what I was thinking of doing.

I have to say, I am rather new about this and unfortunately do not know a lot about css or html. I have built a few websites in the past using some wysiwyg editors and editing here and there by hand. I recently was asked to make a 'very simple' web page for someone very dear to me who needed it very quickly and I said, "Sure. No problem."

I found a nice layout I liked and it was not copyrighted, so I started to work on it and transform it. As it happens, it was written in CSS. The more I worked with the template, the more I got turned on to the idea and the possibilities. Well, I'm hooked. But now I have this idea to make this little page.
But it depends on getting the bottom images (3&4) to somehow align with the bottom of the box while the top images (1&2)are okay as they are, aigned at the top of their respective boxes.

Now, I know, basically, when someone makes a box for an image, they want it to stay in the box.
But, what I would like is to have the images move, collapse into each other, when the browser window is resized. That means a vanishing point in the center of the screen (diamond area). Imagine four images exactly similar, like a background tile, cut into four pieces and then pasted back together, inside out, so to speak, to make a more interesting pattern.
This would mean, I assume at least, that all the images would have the same z-index, so that they would not overprint each other.
I thought it would be nice and started it just as an exercise. Was looking on the web for any example of boxes set up like this, but perhaps have not searched long enough.

Is this possible with CSS or am I barking up the wrong tree?

_________________________________
¦.........................¦.........................¦
¦.........................¦.........................¦
¦.........................¦.........................¦
¦....IMAGE ONE......¦.....IMAGE TWO....¦
¦.........................¦........................¦
¦......................../¦\.......................¦
¦......................./.¦.\......................¦
¦....................../..¦..\.....................¦
¦...................../...¦...\....................¦
¦.____________/__¦___\.___________¦
¦....................\....¦..../...................¦
¦.....................\...¦.../....................¦
¦......................\..¦../.....................¦
¦.......................\.¦./......................¦
¦........................\¦/.......................¦
¦.....IMAGE FOUR... ¦...IMAGE THREE...¦
¦.........................¦........................¦
¦.........................¦........................¦
¦.........................¦........................¦
¦_______________.¦_______________¦

I turn to you, because I found an excellent discussion on the difference between so-called quirky and compliant rendering and I had no idea how hot this topic was until I started to simply vertically align images and ran into all these web pages telling me, this or that command was 'deprecated' and no longer supported.

Needless to say, the "simple" website took a lot longer than expected. But also, I must admit, I am much happier with the results than I had imagined possible. CSS has opened up a whole new box of toys for me. I could even get interested in web design.
I come from the print industry (fototype-setting), so it was natural for me to at least have a slight grasp over the workings of HTML. But this CSS beats anything I have seen thus far and I have only taken a peek at it.

Very much interested in your feedback.

Sincerely and gratefully
Gloria

[Setek]

Hi Gloria, welcome to Webmaster World :)

I had a little think about how I would align four images in such a way, and I came up with something like this:

1. Because you want it to stretch with the viewport, the container for the four images will have to be a relative size, a percentage;
   
2. If you define a width and a height to the container, you can set it to

   position: relative;

   so that all absolutely positioned objects within will be positioned relatively to this container; and
   
3. Define the four images within as

   position: absolute;

   and begin to paint them to the edges-
   If you want it in the top-left side, position it with:
   

   left: 0;
   top: 0;

   
   ... rinse and repeat :)

Now, while this will collapse down on top of each other, I was a little confused as to how you wanted it to collapse - in my outlined situation, and as the only possible method of doing so (I believe,) they will collapse in the order they are rendered (through structure as in which line of code came first,) if all their

z-index

s are the same.

Which might not be the nicest looking collapse you've ever seen, but it is a pure-CSS method.

If you want it to do something a little prettier, you might want to look at a Flash solution instead :)

Hope that helps!