My table won't allow my checkboxes to sit side by side.

Question

The rest of my page conforms to the container width which would be equal to the top line and the bottom line of this midBodyWrapper but these boxes won't lay out side by side. I'm not sure what's going on but I've tried some inline styles too but nothing works. Please see picture attached. Thank you for your help.

 <table id="midBodyWrapper" border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tbody><tr>
                                <td class="subHeader" width="35%"><br>I Mainly Shop For:
                                </td>
                            </tr>
                            <tr>
                                <td class="checks2">
                                    <div>
        <table cellpadding="0" cellspacing="0">
            <tbody><tr valign="middle">
                <td></td>
                <td></td>
            </tr>
        </tbody></table>
        <input type="checkbox" name="CheckBox.A address.Men's Clothing">Men's Clothing<input type="hidden" name="CheckBox.A address.Men's Clothing" value="off">
    </div>

    <div>
        <table cellpadding="0" cellspacing="0">
            <tbody><tr valign="middle">
                <td></td>
                <td></td>
            </tr>
        </tbody></table>
       <input type="checkbox" name="CheckBox.A address.Women's Clothing">Women's Clothing<input type="hidden" name="CheckBox.A address.Women's Clothing" value="off">
    </div>

    <div>
        <table cellpadding="0" cellspacing="0">
            <tbody><tr valign="middle">
                <td></td>
                <td></td>
            </tr>
        </tbody></table>
        <input type="checkbox" name="CheckBox.A address.Boy's Clothing">Boy's Clothing<input type="hidden" name="CheckBox.A address.Boy's Clothing" value="off">
    </div>


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


#midBodyWrapper {
    border: 1px solid #bbb;
    border-left: 0;
    border-right: 0;
    padding: 30px 0;
    margin: 40px 0;
}

It's also a responsive page so i think for some reason it's stuck in it's responsive smaller squished form. Because this would be how it's suppose to look on mobile, kind of.

Answer 1

To display your elements in one row, you need to apply the following property:

td div {
   display: inline-block;
}

or

td div {
   float: left;
}

Demo