aligning divs in <td> to top of <td>
Posted
by
twitter
on Stack Overflow
See other posts from Stack Overflow
or by twitter
Published on 2011-02-23T06:38:45Z
Indexed on
2011/02/23
7:24 UTC
Read the original article
Hit count: 99
update: added jsfiddle: http://jsfiddle.net/WgzgF/11/
I have a table with a bunch of <td>
. Each td has a div .tdcont
which is like a wrapper of all content in that td. In .tdcont
, I have 2 groups of divs .alwaystop
and .below-at
.
<td class="table-td">
<div class="tdcont">
<div class="alwaystop">
<div class="at1">at1</div>
<div class="at2">at2</div>
<div class="at3">at3</div>
</div>
<div class="below-at">
<div class="bat1">bat1</div>
<div class="bat2">bat2</div>
<div class="bat3">bat3</div>
</div>
</div>
</td>
The problem I'm having is that alwaystop
is supposed to align itself to the top border of the cell and below-at
is supposed to come right under it like this
_____________________________________________________
at1 at2 at3 | at1 at2 at3 | at1 at2 at3 |
bat1 bat2 bat3 | bat1 bat2 bat3 | bat1 bat2 bat3 |
small image here | big image here | |
| is taking lots | |
| of space | |
__________________|_________________|________________|
What I'm finding is that alwaystop
and below-at
center themselves vertically like you see in this fiddle http://jsfiddle.net/WgzgF/11/ so if one of the adjacent cells in this row is long, alwaystop
centers itself to this row's height like this
_____________________________________________________
| at1 at2 at3 | |
| bat1 bat2 bat3 | |
at1 at2 at3 | big image here | at1 at2 at3 |
bat1 bat2 bat3 | is taking lots | bat1 bat2 bat3 |
small image here | of space | |
__________________|_________________|________________|
What I want to do is make alwaystop
always start from the top of the cell regardless of adjacent cells' heights, then the below-at
comes under it. How can I do this?
I should add that I have the content of alwaystop
is floated left, so is the content of below-at
, so they're supposed to be like 2 rows inside that td.
.at1, .at2, .at3{
float:left;
}
.bat1, .bat2, .bat3{
float:left;
}
The css for alwaystop and below-at is empty. I tried a whole bunch of stuff like vertical-align and absolute positioning, but nothing worked and I just gave up and deleted them.
.alwaystop{
}
.below-at{
}
© Stack Overflow or respective owner