Multiple (and different) aligns in a table cell

Discussion in 'Web Design and Development' started by Dimwhit, Aug 25, 2008.

  1. Dimwhit macrumors 68000


    Apr 10, 2007
    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?
  2. Definity macrumors member

    Aug 14, 2008
    United Kingdom
    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.
  3. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA
    Code, tested on MSIE and FF:


    div#container_top {
        border: 1px solid red;
        width: 200px;
        height: 200px;
    div#container_middle {
        border: 1px solid red;
        width: 200px;
        height: 200px;
        vertical-align: middle;
        line-height: 200px
    div#container_bottom {
        border: 1px solid red;
        width: 200px;
        height: 200px;
        position: relative
    div#container_bottom p { 
        position: absolute; 
        bottom: 0; 
        padding: 0
    Your HTML:

                <div id='container_top'>top</div>
                <div id='container_middle'>middle</div>
                <div id='container_bottom'><p>bottom</p></div>
    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.

  4. Dimwhit thread starter macrumors 68000


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

Share This Page