How can vertical align bottom and top at the same time? - html

Question

I want to vertical align some elements at the top of the td element and some other elements to be at the bottom of td element .
this is my code :
<ItemTemplate>
<td runat="server" style="position:relative;vertical-align:top;">
<a runat="server" href='#' class="Up">
</a>
<br />
<asp:Label ID="ProductNameLabel" CssClass="Up"/>
<br />
<asp:Label ID="SummaryLabel" CssClass="Up"/>
<br />
<asp:Label ID="PriceLabel" CssClass="Down" />
<br />
<a runat="server" href="#" class="Down">
</a>
<br />
<asp:Button ID="Button1" CssClass="Down" />
</td>
</ItemTemplate>
The elements from the "Up" class i want to be displayed at the top of the td and the elements in the "Down" class at the bottom of the td .
i tried this css :
.Up {
top:0px;
}
.Down {
bottom:0px;
}
And it didn't work . Can someone help me find the solution ?

Answer 1

It would help if you only provided HTML and CSS in your example.
In any case, I think what you are looking for is position:absolute
.Up {
position:absolute;
top:0;
}
.Down {
position:absolute;
bottom:0;
}
This will position them relative to the first parent that has a position:relative on it.
Note, I also removed the px from your 0 as it's not necessary to specify that when the value is 0. 0em = 0px = 0% = 0
Here is a more complete example.