Why do my rows in a colums suddenly jump to the right? And how do I fix that?

Question

Good Day everyone. So while trying to add a few date fields to a popup window on a site I am making I experienced something odd. Adding these 3 rows to the pop up caused the column they were suppose to be in to jump to the right and now i can not get them to line up.

I do not know how important it is to note, but there is a textbox to the left of the column, but the boxes/rows i am adding will be below the textbox's height.

Below I have tried to take a slice of the code as an example, if it is enough I will attempt to add more:

<table style="float: left;">
<tr>
<div>
     <tr>(the following code shows normally like it should)
         <td align="left" valign="top" colspan="4">Lable:</td>
     </tr>
     <tr>
         <td width="2px"></td>
         <td align="left" valign="top">Label</td>
         <td colspan="3">
              <telerik:RadDatePicker ID="RDP1" runat="server" 
         Culture="Language" 
         DbSelectedDate='<%# (Container is GridEditFormInsertItem)? DateTime.Today : Eval("EVAL1") %>'
         Width="145px">
              <Calendar ID="Calendar3" runat="server" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x">
             </Calendar>
              <DatePopupButton HoverImageUrl="" ImageUrl="" />
              <DateInput ID="DateInput3" runat="server" DateFormat="dd-MM-yyyy" DisplayDateFormat="dd-MM-yyyy">
              </DateInput>
              </telerik:RadDatePicker>
         </td>
    </tr>
    <tr>
        <td></td>
        <td colspan="3">Label</td>
    </tr>
    <tr>
        <td></td>
        <td align="left" valign="top">Label:</td>
        <td align="left" valign="top" colspan="3">
        <telerik:RadDatePicker ID="RDP2" runat="server" Culture="Language" DbSelectedDate='<%# Eval("EVAL2") %>' Width="170px">
        <Calendar ID="Calendar5" runat="server" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x">
        </Calendar>
        <DateInput ID="DateInput5" runat="server" DateFormat="dd-MM-yyyy" DisplayDateFormat="dd-MM-yyyy">
        </DateInput>
        </telerik:RadDatePicker>
        <asp:ImageButton ID="btnDelete" runat="server" ImageUrl="url" OnClick="btnFunction_Click" ToolTip="Text" Style="vertical-align:middle;" />
        </td>
    </tr>
</div>
</tr>

For those that would like to see the CSS, there is none, at least none that would have an impact on my problem as they are pointing more towards the actual webpage and not the pop up window.

In advance I would like to say Thank you for the help and your time.

Answer 1

The problem occurs because your rows don't have an equal number of <td> or columns

First row - 1 td with colspan 4 > total 4

Second row - 1 td + 1 td + 1 td with colspan 3 > total 5

Third row - 1 td + 1 td with colspan 3 > total 4

Fourth row - 1 td + 1 td + 1 td with colspan 3 > total 5

Answer 2

Your table is not in the correct structure (you have a tr in a td)

Ensure your table is in the following structure:

<table>
  <tr>
   <td>

Also check your columns are all equal, use colspan="" to merge cells if needed.

<table>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td colspan="4"></td>
 </tr>
<table>