alignment of webpage asp.net

I am creating a webpage. The design has been divide into two side which is left and right. on the left only have image and on the right have labels and textbox for user input. I put the left image into one table call leftT and float to left and same things go to the right hand size but its float to right.

everything look like what i expect until I add a

<tr>
                <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"></asp:GridView>
                </tr>

on the rightT, then the alignment of the rightT goes to the btm of the leftT. anyone can help me on this how to make it stick back to the right?

same code as below

<table id="leftT">
            <tr id ="table_left" >
                <td><asp:Image ID="Image1" runat="server" Height="356px" ImageUrl="~/Image/search.jpg" Width="200px" style="vertical-align:text-top"/>
        </td>
            </tr>
        </table>


    <table id ="rightT">

            <tr>
                <td>
                    <asp:Label ID="lblUserName" runat="server" Text="Label"></asp:Label>
                </td>
                <td>
                    <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="USERNAME" DataValueField="USERNAME">
                        <asp:ListItem></asp:ListItem>
                    </asp:DropDownList>
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SOConnectionString %>" ProviderName="<%$ ConnectionStrings:SOConnectionString.ProviderName %>" SelectCommand="SELECT USERNAME FROM USERMASTER WHERE USERSTATUS = 1 AND USERACCESSRIGHTS = 'Non-Administrator'"></asp:SqlDataSource>
                </td>
                <td>
                    <asp:Label ID="lblCreateOnM" runat="server" Text="Label"></asp:Label>
                </td>
                <td>
                    <asp:Label ID="lblCreateOn" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblDate" runat="server" Text="Label"></asp:Label>
                </td>
                <td><asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
                    <asp:TextBox ID="txtDate" runat="server" Enabled="False"></asp:TextBox>
        <asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar></td>
                <td>
                    <asp:Label ID="lblUpdateOnM" runat="server" Text="Label"></asp:Label>
                </td>
                <td>
                    <asp:Label ID="lblUpdateOn" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblTask" runat="server" Text="Label"></asp:Label>
                </td>
                <td>
                    <asp:DropDownList ID="DropDownList2" runat="server" DataSourceID="SqlDataSource2" DataTextField="TASKNAME" DataValueField="TASKNAME">
                        <asp:ListItem></asp:ListItem>
                    </asp:DropDownList>
                    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:SOConnectionString %>" ProviderName="<%$ ConnectionStrings:SOConnectionString.ProviderName %>" SelectCommand="SELECT DISTINCT TASKNAME FROM TASKMASTER"></asp:SqlDataSource>
                    </td>
                <td>
                    <asp:Label ID="lblUpdateByM" runat="server" Text="Label"></asp:Label>
                </td>
                <td>
                    <asp:Label ID="lblUpdateBy" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>

        </table>


Source: css

Leave a Reply