Need some CSS (Style sheet) help

[screw3d]

Here's the markup. On the left column, I would like '0800' aligned to the top of the cell, and '0900' aligned to the bottom of the same cell. Same goes for the rest of the column.

The problem is that the height of those cells cannot be fixed, but the two elements in the cell must still be aligned to top and bottom.

If this is a div I could've easily done it using absolute positioning. I have tried nesting a div in side the <td> but the height of the div refuses to fill up the space of the table cell.

Help? TIA!

 

[jjones]

lol, fixed now. 🙂

 

[jjones]

Without a specified height, I don't think you can do it. I can make it work using images for the numbers instead of text though.

 

[screw3d]

I probably won't want use images.. but how do you do it using images? Using background-image?

I figured that if there isn't a cleaner way of doing this, I'll have to resort to using two different cells 🙁

 

[jjones]

Yeah, using a background image to put the second number on the bottom. Not exactly the way you want to go though.

 

[screw3d]

Bumpity!

 

[Markbnj]

The only way to do it that I can think of, aside from the method already mentioned, would be to contain the two numbers in seperate divs and use offset positioning. Something like this might work, but I haven't tested it...

<table>
<tr><td valign=center>
<div style="highnum">10</div>
<div style="lownum">20</div>
</td></tr>
</table>

.highnum
{
position: relative;
top: -10px; /* or some other value */
}

.lownum
{
position: relative;
top: +10px; /* or some other value */
}

 

[screw3d]

Originally posted by: Markbnj
The only way to do it that I can think of, aside from the method already mentioned, would be to contain the two numbers in seperate divs and use offset positioning. Something like this might work, but I haven't tested it...

<table>
<tr><td valign=center>
<div style="highnum">10</div>
<div style="lownum">20</div>
</td></tr>
</table>

.highnum
{
position: relative;
top: -10px; /* or some other value */
}

.lownum
{
position: relative;
top: +10px; /* or some other value */
}

I cannot use offset because the height is not fixed

 

[Markbnj]

Maybe try percentages instead of hard values in the offsets then.

.highnum
{
position: relative;
top: -50%;
}

Again, haven't tested it.

 

[screw3d]

Originally posted by: Markbnj
Maybe try percentages instead of hard values in the offsets then.

.highnum
{
position: relative;
top: -50%;
}

Again, haven't tested it.

That wouldn't work because there isn't a way to absolutely position elements inside a table cell. Trust me, I've tried just about every way conceivable 🙁