Aligning picture and text in a TD

[runner]

I have a table with three columns of data in it. In the center column I want to place a picture and a paragraph of text. I want the top of the picture positioned at the top of the column and I want the bottom of the text to be positioned at the bottom of the column. If the height of the column changes I want the space between the picture and the paragraph to change and not the alignment of the pic or text.

If I use valign="top" or valigh="bottom" it will set one or the other but not both. I need to find some way to display the pic and text and have them align separately. Not sure this is even possible. Maybe this could be done with some CSS trickery?

[tedster]

Does this work? Nest a second table in the center column. In there you can have two <tr> with one <td> each. So the top cell can be valign="top" and the bottom one can be valign="bottom"

[runner]

I tried the table within a table. The image and text are both aligned properly within the second table. However, the second table does not extend down to the bottom of the center column so it isn't aligned properly overall. I'm thinking the only way to do this is CSS. I'm now going to look in that direction.

[rocknbil]

Actually this is more difficult to do reliably in CSS (flame suit on. :-) ) However it's really easy in tables.

<table width="85%" align="center" cellpadding="0" cellspacing="0"> 
 <tr> 
 <td rowspan="2" valign="top"> Data column one</td> 
 <td valign="top"> 
 <img src="myimage.jpg" width="250" height="250" alt="my image top column 2"> 
 </td> 
 <td rowspan="2" valign="top"> Data column three</td> 
 </tr> 
 <tr><td valign="bottom"><p class="bottom-text">This is your bottom paragraph in column 2</p></td></tr> 
</table> 

set borders to 1 to make sure you're not hosing up the rowspans.

[runner]

rocknbil... you're a genius! This works great! Thanks...

[rocknbil]

Hardly. A recovering table junkie, and you just shared my fix. :-) I was hoping to find a CSS post in here, maybe one will come.

[SuzyUK]

seeing as you asked.. ;)

this is not quite the CSS post you might have hoped for, but more the reasons why there aren't any?

You are right this is more reliable with tables, CSS&P (CSS and Positioning) doesn't go well inside a table cell. Only IE does what you might expect!

What you might expect from CSS:
if you give the center cell

position: relative;

, making it into a containing block [w3.org] for it's contents, you could then position the image and/or text using absolute positioning inside it. Although this works in IE, it is however not a great option as the text in one of the data/side column would always need to be longer than the image + text in the center else the image and text could possibly overlap.

Why the other browsers don't do this:
The recommendations for the positioning scheme [w3.org], actually don't define the behaviour of

position: relative;

on a table cell.

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

Why does IE do it?:
Remember that IE doesn't actually support most of those elements listed above, specifically table-cell, so I put their, albeit sometimes useful, behaviour down to a side effect of hasLayout [msdn.microsoft.com]. a table and table-cell are just 2 of the elements which have "layout" by default.

BODY, IMG, INPUT, TABLE and TD elements always have layout.

So by having "layout" the <td>'s are responsible for their own content - but only in a way that IE understands.

I can't think of a case where it would be useful to be able to do this with CSS, because it would still have the same problem that positioning inside a table cell would have, namely the overlap problem if say dynamic content weren't enough to stretch the table itself to a sufficient height to cope with the image and text. It would still require some knowledge of the end result, e.g. in this case - the image height - so some kind of failsafe be built in (top margin on text?) to prevent overlap.

Doing it with rowspans on the tables, while it works, requires the programmer to have knowledge of how the end product will look, in order to insert the rowspans - so it doesn't fit with the CSS ethos of seperating structure from presentation (marking up the document and styling later), and this would also be the case if a CSS solution were used, and we can't have that now can we!.

can it be done x-browser with CSS?
Yes it can but I wouldn't recommend it, it indeed requires some "trickery"; a relatively positioned wrapper div - and it would be more reliable if the explicit column widths were known, and as mentioned above the image height would be a great help!

------

This situation could be the biggest drawback for those that are using hybrid layouts, i.e. using one main table for the page framework in order to get full length columns, then trying to use CSS&P inside it?

Suzy

[Endurer]

Thank you Rocknbil.. I was searching for it at google and came up to this topic... man I can't express my gratitude.. thanks a lot :-)