Can I use CSS to align a <div> within a <td>?

I have some complicated tabular data. In each <td>, I have two closely related kinds of data that I would like to be visually separated, like this:

<td>
    <div class='float'>
        <ul class='group1'>
            <li>Item 1</li>       
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <div class='sink'>
        <ul class='group2'>
            <li>item 1</li>       
            <li>item 2</li>
        </ul>
    </div>
</td>

Because these lists are closely related, I'd like to keep them in one table cell. (Adding an additional row for group2 would also require a significant rewrite of the PHP generating the table.) What I'm wanting to do is to have div.float aligned with the top of the TD, and div.sink aligned with the bottom. I feel like this should be doable in CSS, but vigorous Googling has availed me not at all. I'm already using jQuery (and jQueryUI), so if there's a jQuery way to do this that would work too.

Halp?

ET开发者_如何学编程A: You can see the table in action in this fiddle: http://jsfiddle.net/mysphyt/JVdDA/ . The button below the table approximates the desired behavior with jQuery, but this feels like a deeply hinky solution, and I'd definitely prefer to go with a pure CSS fix. Desired behavior: div.float on top of the TD, div.sink on bottom. (Meaning: tutors at the top of the TD, and the divs for faculty and staff aligned with each other on the bottom.) I feel like I'm not much clarifying with my words, so hopefully the fiddle will make clear what I mean.

What about going oldschool. This will avoid the two uls sitting on top of one another:

<td>
<table width="100%" height="100%">
    <tr><td valign="top">
        <ul class='group1'>
            <li>Item 1</li>       
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </td></tr>
    <tr><td valign="bottom">
        <ul class='group2'>
            <li>item 1</li>       
            <li>item 2</li>
        </ul>
    </td></tr>
</table>
</td>

The inside table will ajust to the surrounding td and and make the surrounding td bigger if the content of the ul is to big.

Try this http://www.w3schools.com/Css/pr_pos_vertical-align.asp:

.float { vertical-align: top; }
.sink { vertical-align: bottom; }

If this doesn't help, please post a jsFiddle of the list and any existing CSS :)

If I understand correct what do You want to do is that if, for example, You have td with height 500px and div.float height on 100px, div.sink height on 100px then You don't want that bottom edge of div.float is top edge of div.sink? Top edge of div.float should be top edge of td, bottom edge of div.sink should be bottom edge of td? Then I think that You can do that by position: absolute.

<td>
    <div class="class_name"> <!-- added -->
     <div class='float'>
        <ul class='group1'>
            <li>Item 1</li>       
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
     </div>
     <div class='sink'>
        <ul class='group2'>
            <li>item 1</li>       
            <li>item 2</li>
        </ul>
     </div>
   </div> <!-- added -->
</td>

css:

.class_name {
    position: relative;
    height: 100%;  /*added*/
}

.sink {
    position: absolute;
    bottom: 0;
}

But I'm not sure if that will be working. I used something similar in past and if I remember correctly then it can be helpful. :) Try it out and share if that worked.

EDIT: Insert these two divs in another div like I edited above. Modifie also css. I've just tested it and it works. :)

Just apply the CSS you need to .float and .sink. No need to wrap them in a div. We call this Divitis, and considering that as 'new school' hasn't been accurate since early 2000's.

Have to agree with previous comments. If you are stuck using tables then stick with tables and in that case using rowspan...http://jsfiddle.net/cssguru/5r5KH/4/

First add the required height to your row then

add the following style. It should also work if the height of row is not mentioned.

But its safe to add some height for the row.

.float
{
      position: absolute;
}

.sink
{
     position: absolute;
     margin-top: 50%;
}

Ok here's my thoughts:

• This table is massive. You should seriously consider removing some information from the cells or displaying it in some other way
• Adding additional rows in the "original" table will most likely make things a lot worse in terms of content-representation => the additional data is directly related to the first div (don't even think about row-/colspan)
• Same goes for sub-tables. Though I think it would work without JavaScript. (Just make the sub-table 100% height, then "valign" the top row top, the bottom row bottom)

Here's my solution:

• You will need JavaScript. There are solutions for pure CSS equal height columns, but they don't work when those are inside different table cells -- or I don't know how that would work
• What you want to do is make the upper part equal height
• This requires the "upper part" to always exist
• You will also want to change the valign property to "top"

Here's a fiddle of how this could work (I fork'd yours) http://jsfiddle.net/3NzQ4/1/