I have two divs nested inside another div. One of them is a table displaying a list of items that can be updated by entering text into a textbox positioned next to it. I am struggling to position the textbox in the bottom right corner despite trying various methods such as floating and positioning. The first image shows the current layout, while the second image illustrates how I want it to look.
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;
}