I currently have two divs that are within another div, one is a table with a list of items that is updated by using a textbox that is positioned next to it, I am trying to position the textbox in the bottom right corner, I have tried floating/positioning and it doesn’t seem to have any real effect on it, the first image is how it currently is, the second image is how I would like it to be.


ASP.NET code:
<asp:Content ID="Content1" ContentPlaceHolderID="PrimaryContentPlaceHolder" runat="Server">
<%--<div style="margin-bottom: 20px; width: 300px;">--%>
<table class="Grid" style="width:300px;float:left; margin-right:10px;" >
<tr>
<th>
Banned Domains
</th>
<td runat="server" id="bannedDomains">
</td>
</tr>
</table>
<%-- </div>--%>
<div style="position:relative; bottom:0px;">
<asp:TextBox ID="bannedDomainText" runat="server" Rows="5" TextMode="SingleLine"
Width="150px" Height="19px" />
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" style="padding: 2px 5px 2px 5px;" PostBackUrl="~/admin/bespoke/Green-FreeShipping.aspx"
Text="Add to List" />
</div>
</asp:Content>
css:
#Content table
{
border-collapse: collapse;
}
#Content table.Grid
{
width: 100%;
clear: both;
margin: 12px 0 12px 0;
}
#Content table.Grid th, #Content table.Grid td
{
background-color: White;
border-top: 1px solid #cccccc;
padding: 2px 6px 2px 6px;
}
#Content table.Grid th
{
background-color: #f5f5f5;
}
#Content table tr:hover td
{
background: #f9f9f9;
}
Here you go, use it like this
Demo
CSS
HTML