Hi I am using the following CSS script to align the checkboxes in my ASP.NET Project-

.checkbox-grid td 
        {
            text-align: left !important;
            display: inline-table !important;
            float: left !important;
            width: 25% !important;
        }

The Image of the page before Distortion

There is a control on the page called open record that opens the selected record on to a new tab. Whenever I select a record and open it the rendering of checkboxs in the current page gets distorted as shown in the Image below

The image of the page after distortion

I have set the max-width of the table and the row to 800px yet it breaks.

Any clue where am i going wrong?

Here are the lines used by me..

<table>
    <tr>
        <td>The controls on the left side</td>
        <td style="max-width:800px !important;>
            <div style="margin:15px 15px !important;">
                <asp:CheckBoxList runat="server" ID="valArea" RepeatDirection="Horizontal" CssClass="checkbox-grid" Width="800px">
                    <asp:ListItem Value="Anupam Nagar">Anupam Nagar</asp:ListItem>
                    <asp:ListItem Value="Atulbaug">Atulbaug</asp:ListItem>
                    . . . and so on 
                </asp:CheckBoxList>
            </div>

        </td>
    </tr>
</table>