[RESOLVED] Multiple object with different alignment in single table cells

[frankvw]

Hi, everyone,

This might be very simple but if it is, I just can't see it.

I have a single table cell of arbitrary width and height. In that table cell I want to display an image that must be aligned with the top of the cell, with a caption below it that must be aligned with the bottom of the cell. In other words, the gap between image and caption must vary to fill up whatever space is left. Like so:

+----------------+
|   +---------+    |
|   |    img     |    |
|   +---------+    |
|                       |
|                       |
|                       |
|      caption       |
+----------------+

Can this be done using CSS? If so, how? Or is it simply impossible to reliably assign different positioning to elements within the same table cell?

All suggestions appreciated. Thanks in advance!

// FvW

[moritana]

try relative and absolute positioning.
give the container (in your case, td?) relative positioning, rather than static.
after you do that, you can position the elements inside it however you want, with absolute positioning.
example:

div {height:300px;
    width:300px;
    border:2px solid black;
    position:relative;}
img {position:relative;
    top:0px;
    left:opx;}
p {position:absolute;
    bottom:0px;
    }

look here for more info: http://stackoverflow.com/questions/1...iner-using-css

[frankvw]

Thanks. I tried that, but when I assigned absolute positioning to the caption text, it appeared positioned relatively to the page rather than to the table cell. Which confirms what is said in the page you refer to.

Hm. I can see that I need to fiddle with this. But at least it appears to be possible, which at least helps. :-)

// FvW

[moritana]

did you set the position of the cell to "relative"?

[frankvw]

Yes I did. But no effect.

However, I have taken the example code referred to by Moritana, and that works. So there is obviously something in my own CSS code that overrides the positioning. I am now in the process of finding out what that is, starting with the example code and working toward my own code. I am sure I will locate whatever the conflicting or overriding CSS property is.

Thanks to you both for your assistance!

// FvW

[frankvw]

Aha. Mystery explained, problem solved. I had not assigned a fixed height to the table cells, but I let them scale dynamically on the basis of the (varying) sizes of the images to be displayed in them. So I was trying to apply absolute positioning to objects within a cell of (at the time of rendering) variable size. Which, unsurprisingly, does not work, since there is no fixed point of reference to begin with.

Lesson learned. :-)

// FvW