Multiple (and different) aligns in a table cell

[Dimwhit]

This is driving me nuts, and I'm not even sure how best to handle this.

I have a column within a table. In that column, I have three bits of info. I want to align one bit at the top, one in the middle, and one at the bottom. Ideally, I'd like to do all this within one < td > element.

I know I can create a table within that cell, have three rows in the table, and go that route, but it wasn't giving me the results I needed (likely because it's hard to define a height for the rows to make them look proper).

Any ideas?

 

[Definity]

You should be using <div>'s instead.

Tables are a redundant way of setting up information. Specify the information for each <div> in it's own CSS identifier, .tableheader, .tablecontent, .tablefooter.

Allocate each property that you want to be consistent.

I can help further if you have the code at hand/live example.

 

[SrWebDeveloper]

Code, tested on MSIE and FF:

CSS:

<style>

div#container_top {
    border: 1px solid red;
    width: 200px;
    height: 200px;
    vertical-align:top;
    text-align:left
}

div#container_middle {
    border: 1px solid red;
    width: 200px;
    height: 200px;
    vertical-align: middle;
    text-align:left;
    line-height: 200px
}

div#container_bottom {
    border: 1px solid red;
    width: 200px;
    height: 200px;
    position: relative
}

div#container_bottom p { 
    position: absolute; 
    bottom: 0; 
    margin:0; 
    padding: 0
    }

</style>

Your HTML:

<table>
    <tr>
        <td>
            <div id='container_top'>top</div>
            <div id='container_middle'>middle</div>
            <div id='container_bottom'><p>bottom</p></div>
        </td>
    </tr>
</table>

Note the <p> tags used in the bottom container for bottom alignment. This is used to wrap inline content to align properly in all browsers including MSIE which treats vertical-align differently than most others. Adjust the width and height as you see fit, I added borders so you can see what's going on. Of course I put the div's in a table cell as you requested, normally you should avoid using tables at all except for tabular data as has been mentioned many times by others in this forum and instead use a div to wrap all the other div's and edit the CSS.

Attention all: Good examples of vertical alignment in CSS that works on most browsers including MSIE.

-jim

 

[Dimwhit]

Thank you both! I'll give this a shot when I get back to work. Much appreciated.