Question

I have some radio buttons on which I have applied css to align them.
Here is the image:

These are all placed in a table and third column of table contains one listbox or dropdown list against each pair of radio button and when I click the second radio button, hidden listbox or dropdown appears in the third column.

As I have applied css on it to set its height and width, when I click the second radio button of each pair and listbox appears, third column doesn’t grow dynamically. See the image:

I can’t remove CSS because alignment will suffer.

There is another table on the right side which I want also grow or shrink on the basis of clicking radio buttons. But it was not fitting in first table because I have not much idea of css, so I separate it but I really wish this to merge in first table somehow without affecting table structure.

Code of aspx left table is:

<div class="formBroadLeftCol">
                    <table border="1">
                        <tr>
                            <td class="tdShortLeft">
                                <asp:RadioButton ID="rdoAllStaff" runat="server" Text="All Staff" AutoPostBack="true"
                                    Checked="true" GroupName="grpStaff" OnCheckedChanged="rdoAllStaff_CheckedChanged" />
                            </td>
                            <td class="tdShortRight">
                                <asp:RadioButton ID="rdoStaff" runat="server" Text="Staff" AutoPostBack="true" GroupName="grpStaff"
                                    OnCheckedChanged="rdoStaff_CheckedChanged" />
                            </td>
                            <td class="tdShortMiddle">
                                <div id="divStaff" runat="server" visible="false" class="divListBox" style="width: 175px;
                                    height: 80px;">
                                    <asp:ListBox ID="lstStaff" runat="server" SelectionMode="Multiple" Width="175px"
                                        Height="81" CssClass="SingleColumnlist"></asp:ListBox>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdShortLeft">
                                <asp:RadioButton ID="rdoAllService" runat="server" Text="All Services" AutoPostBack="true"
                                    Checked="true" GroupName="grpService" OnCheckedChanged="rdoAllService_CheckedChanged" />
                            </td>
                            <td class="tdShortRight">
                                <asp:RadioButton ID="rdoService" runat="server" Text="Service" AutoPostBack="true"
                                    GroupName="grpService" OnCheckedChanged="rdoService_CheckedChanged" />
                            </td>
                            <td class="tdShortMiddle">
                                <div id="divService" runat="server" visible="false" class="divListBox" style="width: 175px;
                                    height: 80px;">
                                    <asp:ListBox ID="lstService" runat="server" SelectionMode="Multiple" Width="175px"
                                        Height="81" CssClass="SingleColumnlist"></asp:ListBox>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdShortLeft">
                                <asp:RadioButton ID="rdoAllServiceType" runat="server" Text="All Service Types" AutoPostBack="true"
                                    Checked="true" GroupName="grpServiceType" OnCheckedChanged="rdoAllServiceType_CheckedChanged" />
                            </td>
                            <td class="tdShortRight">
                                <asp:RadioButton ID="rdoServiceType" runat="server" Text="Service Type" AutoPostBack="true"
                                    GroupName="grpServiceType" OnCheckedChanged="rdoServiceType_CheckedChanged" />
                            </td>
                            <td class="tdShortMiddle">
                                <div id="divServiceType" runat="server" visible="false" class="divListBox" style="width: 175px;
                                    height: 80px;">
                                    <asp:ListBox ID="lstServiceType" runat="server" SelectionMode="Multiple" Width="175px"
                                        Height="81" CssClass="SingleColumnlist"></asp:ListBox>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdShortLeft">
                                <asp:RadioButton ID="rdoAllServiceStatus" runat="server" Text="All Service Statuses"
                                    AutoPostBack="true" Checked="true" GroupName="grpServiceStatus" OnCheckedChanged="rdoAllServiceStatus_CheckedChanged" />
                            </td>
                            <td class="tdShortRight">
                                <asp:RadioButton ID="rdoServiceStatus" runat="server" Text="Service Status" AutoPostBack="true"
                                    GroupName="grpServiceStatus" OnCheckedChanged="rdoServiceStatus_CheckedChanged" />
                            </td>
                            <td class="tdShortMiddle">
                                <div id="divServiceStatus" runat="server" visible="false" class="divListBox" style="width: 175px;
                                    height: 80px;">
                                    <asp:ListBox ID="lstServiceStatus" runat="server" SelectionMode="Multiple" Width="175px"
                                        Height="81" CssClass="SingleColumnlist"></asp:ListBox>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdShortLeft">
                                <asp:RadioButton ID="rdoAllTreatmentProvider" runat="server" Text="All Treatment Provider"
                                    AutoPostBack="true" Checked="true" GroupName="grpTreatmentProvider" OnCheckedChanged="rdoAllTreatmentProvider_CheckedChanged" />
                            </td>
                            <td class="tdShortRight">
                                <asp:RadioButton ID="rdoTreatmentProvider" runat="server" Text="Treatment Provider"
                                    AutoPostBack="true" GroupName="grpTreatmentProvider" OnCheckedChanged="rdoTreatmentProvider_CheckedChanged" />
                            </td>
                            <td class="tdShortMiddle">
                                <div id="divTreatmentProvider" runat="server" visible="false" class="divListBox"
                                    style="width: 175px; height: 80px;">
                                    <asp:ListBox ID="lstTreatmentProvider" runat="server" SelectionMode="Multiple" Width="175px"
                                        Height="81" CssClass="SingleColumnlist" DataSourceID="dtsTreatmentProviders" DataTextField="FirstName" DataValueField="ServiceId"></asp:ListBox>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdShortLeft">
                                <asp:RadioButton ID="rdoAllConsumerStatus" runat="server" Text="All Consumer Statuses"
                                    AutoPostBack="true" Checked="true" GroupName="grpConsumerStatus" OnCheckedChanged="rdoAllConsumerStatus_CheckedChanged" />
                            </td>
                            <td class="tdShortRight">
                                <asp:RadioButton ID="rdoConsumerStatus" runat="server" Text="Consumer Status" AutoPostBack="true"
                                    GroupName="grpConsumerStatus" OnCheckedChanged="rdoConsumerStatus_CheckedChanged" />
                            </td>
                            <td class="tdShortMiddle">
                                <div id="divConsumerStatus" runat="server" visible="false" class="divListBox" style="width: 175px;
                                    height: 80px;">
                                    <asp:ListBox ID="lstConsumerStatus" runat="server" SelectionMode="Multiple" Width="175px"
                                        Height="81" CssClass="SingleColumnlist" DataSourceID="dtsClientStatus"
                                        DataTextField="Status" DataValueField="Id"></asp:ListBox>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdShortLeft">
                                <asp:RadioButton ID="rdoAllEhnicity" runat="server" Text="All Ehnicities" AutoPostBack="true"
                                    Checked="true" GroupName="grpEhnicity" OnCheckedChanged="rdoAllEhnicity_CheckedChanged" />
                            </td>
                            <td class="tdShortRight">
                                <asp:RadioButton ID="rdoEhnicity" runat="server" Text="Ehnicity" AutoPostBack="true"
                                    GroupName="grpEhnicity" OnCheckedChanged="rdoEhnicity_CheckedChanged" />
                            </td>
                            <td class="tdShortMiddle">
                                <div id="divEhnicity" runat="server" visible="false" class="divListBox" style="width: 175px;
                                    height: 80px;">
                                    <asp:ListBox ID="lstEhnicity" runat="server" SelectionMode="Multiple" Width="175px"
                                        Height="81" CssClass="SingleColumnlist" DataSourceID="dtsEthnicity" 
                                        DataTextField="LookupItem" DataValueField="Id"></asp:ListBox>
                                </div>
                            </td>

                        </tr>
                    </table>

Code of Right table:

<div class="formShortRightCol">
                        <table border="1">
                            <tr>
                                <td>
                                <asp:CheckBoxList ID="chkStaff" runat="server" RepeatDirection="Horizontal">
                                            <asp:ListItem Text="Display" Value="Display"></asp:ListItem>
                                            <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem>
                                        </asp:CheckBoxList>
                                        </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBoxList ID="chkService" runat="server" RepeatDirection="Horizontal">
                                        <asp:ListItem Text="Display" Value="Display"></asp:ListItem>
                                        <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem>
                                    </asp:CheckBoxList>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBoxList ID="chkServiceType" runat="server" RepeatDirection="Horizontal">
                                        <asp:ListItem Text="Display" Value="Display"></asp:ListItem>
                                        <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem>
                                    </asp:CheckBoxList>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBoxList ID="chkServiceStatus" runat="server" RepeatDirection="Horizontal">
                                        <asp:ListItem Text="Display" Value="Display"></asp:ListItem>
                                        <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem>
                                    </asp:CheckBoxList>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBoxList ID="chkTreatmentProvider" runat="server" RepeatDirection="Horizontal">
                                        <asp:ListItem Text="Display" Value="Display"></asp:ListItem>
                                        <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem>
                                    </asp:CheckBoxList>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBoxList ID="chkConsumerStatus" runat="server" RepeatDirection="Horizontal">
                                        <asp:ListItem Text="Display" Value="Display"></asp:ListItem>
                                        <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem>
                                    </asp:CheckBoxList>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBoxList ID="chkEthnicity" runat="server" RepeatDirection="Horizontal">
                                        <asp:ListItem Text="Display" Value="Display"></asp:ListItem>
                                        <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem>
                                    </asp:CheckBoxList>
                                </td>
                            </tr>
                        </table>
                    </div>

Relevant CSS classes are:

.formBroadLeftCol
{   
    padding: 0px 0px 0px 0px;
    float:left; 
    width:450px;
}

.formShortRightCol
{
    padding: 0px 0px 0px 0px;
    float:right; 
    /*width:180px;*/
}

.tdShortLeft
{
    width:150px;
    height:20px;
    float:left; 
    padding: 5.5px 0px 5.5px 0px;
}

.tdShortRight
{
    width:150px;
    height:20px;
    /*float:right; */
    padding: 5.5px 0px 5.5px 0px;
}

.tdShortMiddle
{
    width:100px;
    height:20px;
    float:right;
    margin:0px 25px 0px 0px;
    padding: 5.5px 0px 5.5px 0px;
}

Answer 1

This is happening because you have created float based layout on the various block elements. Floating elements break out of the normal flow of the page.

You don’t think you need to apply float on the td‘s. You can make use of the text-align: left; for aligning the element in the td.