Reputation: 51
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?
ETA: 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.
Upvotes: 4
Views: 1850
Reputation: 10512
Ok here's my thoughts:
Here's my solution:
Here's a fiddle of how this could work (I fork'd yours) http://jsfiddle.net/3NzQ4/1/
Upvotes: 0
Reputation: 3117
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%;
}
Upvotes: 0
Reputation: 6759
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/
Upvotes: 0
Reputation: 516
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.
Upvotes: 0
Reputation: 1193
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.
Upvotes: 1
Reputation: 26
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. :)
Upvotes: 0
Reputation: 3834
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 :)
Upvotes: 0