CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Miguel Mas
Miguel Mas

Reputation: 545

Two column checkboxes layout using just css

The following code is a dynamically generated part of a form and I only can style it using css.

No html changes but for the names of the classes with the exception of: classes "element" and "formField" as they are used as common classes for other elements in the form.

The layout I am looking for is a two column label-checkbox. As you can see in the code, I have 4 label-checkbox items. I need item 0 and 1 in a column and in another column next to it, item 2 and 3.

I know the tables should be gone for good, I agree but please help me here, I am going to build the whole site again but I don't have the time just yet. 

<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat0">Category 0</label></div></td>
<td width="70%" align="left">
<div id="div_eCat0" style="float:left">
<input type="checkbox" name="eCat0" value="1" class="formField"> 
</div>
</td>
</tr>
</tbody></table>
</div>

<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat1">Category 1</label></div></td>
<td width="70%" align="left">
<div id="div_eCat1" style="float:left">
<input type="checkbox" name="eCat1" value="1" class="formField"> 
</div>
</td>
</tr>
</tbody></table>
</div>

<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat2">Category 2</label></div></td>
<td width="70%" align="left">
<div id="div_eCat2" style="float:left">
<input type="checkbox" name="eCat2" value="1" class="formField"> 
</div>
</td>
</tr>
</tbody></table>
</div>

<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat3">Category 3</label></div></td>
<td width="70%" align="left">
<div id="div_eCat3" style="float:left">
<input type="checkbox" name="eCat3" value="1" class="formField"> 
</div>
</td>
</tr>
</tbody></table>
</div>

Upvotes: 1

Views: 2584

Answers (3)

Todd Hale
Todd Hale

Reputation: 571

I did this for some md-checkboxes in my parent div, and they are column-first ordered! Like this:

1                                              4
2                                              5
3

CSS:

.parent {
    columns: 2;
}
.parent > * {
    width: 100%;
}

Upvotes: 0

Maarten ter Horst
Maarten ter Horst

Reputation: 2987

If you can style the parent element of those four divs, you can set

.parent {
    columns: 2;
}

This will work in IE10+. https://jsfiddle.net/c979dxLe/1/

You can also set the width of the columns. Docs: https://developer.mozilla.org/nl/docs/Web/CSS/columns

Upvotes: 0

Titus
Titus

Reputation: 22474

You can use the CSS float and clear in order to do that. Here is an example.

.element{
  float:right;
}

.element:nth-child(odd){
  clear:right;
}
<div class="element" id="mycat">
            <table width="100%" border="0" style="">
                <tbody>
                    <tr>
                        <td width="30%" align="right">
                            <div style="float:right"><label id="lbl_eCat0">Category 0</label></div>
                        </td>
                        <td width="70%" align="left">
                            <div id="div_eCat0" style="float:left">
                                <input type="checkbox" name="eCat0" value="1" class="formField"> 
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="element" id="mycat">
            <table width="100%" border="0" style="">
                <tbody>
                    <tr>
                        <td width="30%" align="right">
                            <div style="float:right"><label id="lbl_eCat1">Category 1</label></div>
                        </td>
                        <td width="70%" align="left">
                            <div id="div_eCat1" style="float:left">
                                <input type="checkbox" name="eCat1" value="1" class="formField"> 
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="element" id="mycat">
            <table width="100%" border="0" style="">
                <tbody>
                    <tr>
                        <td width="30%" align="right">
                            <div style="float:right"><label id="lbl_eCat2">Category 2</label></div>
                        </td>
                        <td width="70%" align="left">
                            <div id="div_eCat2" style="float:left">
                                <input type="checkbox" name="eCat2" value="1" class="formField"> 
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="element" id="mycat">
            <table width="100%" border="0" style="">
                <tbody>
                    <tr>
                        <td width="30%" align="right">
                            <div style="float:right"><label id="lbl_eCat3">Category 3</label></div>
                        </td>
                        <td width="70%" align="left">
                            <div id="div_eCat3" style="float:left">
                                <input type="checkbox" name="eCat3" value="1" class="formField"> 
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

Upvotes: 1

Related Questions